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

本文实例讲述了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相关内容可查看本站专题：《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • jQuery Ajax文件上传(php)

    如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代

  • jquery ajax实现文件上传功能实例代码

    下面看下ajax实现文件上传   没有使用插件 一.单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></

  • 使用jQuery ajaxupload插件实现无刷新上传文件

    项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件. 代码如下 使用方法如下 <script type="text/javascript"> $(function () { var button = $('#upload'); new AjaxUpload(button, { action: '/upload/imagesAjaxUpload', name: 'upload', onSubmit: f

  • jQuery+AJAX实现网页无刷新上传

    jQuery+AJAX实现网页无刷新上传

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

  • PHP+jQuery+Ajax实现多图片上传效果

    PHP+jQuery+Ajax实现多图片上传效果

    今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

  • jQuery Ajax 上传文件处理方式介绍(推荐)

    jQuery Ajax 上传文件处理方式介绍(推荐)

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式. FormData对象 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过J

  • jquery插件ajaxupload实现文件上传操作

    jquery插件ajaxupload实现文件上传操作

    本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></sp

  • Jquery基于Ajax方法自定义无刷新提交表单Form实例

    本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos

  • jQuery的ajax中使用FormData实现页面无刷新上传功能

    jQuery的ajax中使用FormData实现页面无刷新上传功能

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

  • 基于HTML5 Ajax文件上传进度条如何实现（jquery版本）

    基于HTML5 Ajax文件上传进度条如何实现（jquery版本）

    在上篇文章给大家介绍了这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异步上传二进制文件. 1.FormDate对象的创建 var formData = new FormData(); 2.向 FormDate 对象添加数据 formData.append("catnam

  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

    jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

随机推荐