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实现简单的抽奖游戏
May 05 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
mysql+php分页类(已测)
2008/03/31 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
python通过ssh-powershell监控windows的方法
2015/06/02 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python实现按中文排序的方法示例
2018/04/25 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
解析Python3中的Import
2019/10/13 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
django model object序列化实例
2020/03/13 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
工作感言一句话
2015/08/01 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android