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 Validate表单验证插件实现代码
Jun 08 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery+ajax实现文件上传功能
Dec 22 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
解析php中const与define的应用区别
2013/06/18 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
vue中appear的用法
2017/08/17 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
js实现微信聊天效果
2020/08/09 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python redis 删除key脚本的实例
2019/02/19 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python pandas 时间日期的处理实现
2019/07/30 Python
详解Python3 pickle模块用法
2019/09/16 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Python绘制动态水球图过程详解
2020/06/03 Python
工业自动化专业自荐信范文
2014/04/10 职场文书
批评与自我批评总结
2014/10/17 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
质量保证书
2015/01/17 职场文书
学校教学工作总结2015
2015/05/19 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
python周期任务调度工具Schedule使用详解
2021/11/23 Python