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 相关文章推荐
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php类常量用法实例分析
2015/07/09 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
iOS10推送通知开发教程
2016/09/19 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
js返回上一页并刷新代码整理
2012/12/21 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
bootstrap table小案例
2016/10/21 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
详解Python中的条件判断语句
2015/05/14 Python
python re模块findall()函数实例解析
2018/01/19 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
python集合常见运算案例解析
2019/10/17 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
生产内勤岗位职责
2013/12/07 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
申论倡议书范文
2014/05/13 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android