Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】


Posted in jQuery onMay 29, 2020

本文实例讲述了Jquery+AJAX实现无刷新上传并重命名文件操作。分享给大家供大家参考,具体如下:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Ajax上传图片</title>
  <meta charset="utf-8">
  <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
</head>
<body>
  <h1>Ajax上传图片</h1>
  <!-- 表单 -->
  <form id="form" enctype="multipart/form-data">
    <input type="file" id="fileAttach" name="file"/>
    <input type="button" onclick="upload()" value="上传"/>
  </form>

  <!-- 显示结果 -->
  <h2 id="upload-result"></h2>

  <!-- 显示图片 -->
  <div id="imgdiv"></div>

  <!-- Ajax上传 -->
  <script>
    function upload(){
      var form = new FormData(document.getElementById("form"));
      $.ajax({
        url:"upload.php",
        type:"post",
        data:form,
        cache: false,
        processData: false,
        contentType: false,
        success:function(data){
          if (data.res == "400") {
            $("#upload-result").text("上传成功");
            $("#imgdiv").html("<img src=\"upload/"+data.path+"\"/>");
          }else if (data.res == "403") {
            $("#upload-result").text("格式不对");
          }else if (data.res == "404") {
            $("#upload-result").text("上传错误");
          }
          
        },
        error:function(data){
          alert("上传失败")
        }
      })
    }
  </script>
</body>
</html>

upload.php

<?php
header("Content-type:application/json");
 
//获取原始文件名
$filename = $_FILES["file"]["name"];
 
//获取文件后缀名
$hzm = substr($filename,strpos($filename,"."));
 
//设置新文件名
$newfilename = substr(str_shuffle("QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm"),26,10);
 
// 允许上传的图片后缀
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $filename);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 2048000)  // 小于 2000 kb
&& in_array($extension, $allowedExts))
{
  if ($_FILES["file"]["error"] > 0)
  {
    echo "{\"res\":\"404\"}";
  }
  else
  {
  // 此处可以输出文件的详细信息
  if (file_exists("upload/" . $newfilename.$hzm))
    {
      //
    }
    else
    {
      move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $newfilename.$hzm);
      echo "{\"path\":\"$newfilename$hzm\",\"res\":\"400\"}";
    }
  }
}
else
{
  echo "{\"res\":\"403\"}";
}
?>

请在当前目录建立upload文件夹用于存放上传后的图片

GiF Demo

Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】

更多关于jQuery相关内容可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
jQuery实现鼠标滑动切换图片
May 27 #jQuery
jQuery弹框插件使用方法详解
May 26 #jQuery
jQuery实现的分页插件完整示例
May 26 #jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
You might like
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
python实现彩色图转换成灰度图
2019/01/15 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
附答案的Java面试题
2012/11/19 面试题
工程质量承诺书
2014/03/27 职场文书
高一学生评语大全
2014/04/25 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
八达岭长城导游词
2015/01/30 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
python如何查找列表中元素的位置
2022/05/30 Python