ajax php 异步上传图片,使用Ajax异步上传图片的方法(html,javascript,php)

前两天项目中需要用到异步上传图片和显示上传进度的功能，于是找了很多外国的文章，翻山越岭地去遇上各种坑，这里写篇文章记录一下。

HTML

HTML代码没什么好说，一个form表单，还有文件类型的input。我们来看js部分。

javascript

//绑定了`submit`事件。

$('#fileupload-form').on('submit',(function(e) {

e.preventDefault();

//序列化表单

var serializeData = $(this).serialize();

// var formData = new FormData(this);

$(this).ajaxSubmit({

type:'POST',

url: *yoururl*,

dataType: 'json',

data: serializeData,

// data: formData,

//attention!!!

contentType: false,

cache: false,

processData:false,

beforeSubmit: function() {

//上传图片之前的处理

},

uploadProgress: function (event, position, total, percentComplete){

//在这里控制进度条

},

success:function(){

},

error:function(data){

alert('上传图片出错');

}

});

}));

//绑定文件选择事件，一选择了图片，就让`form`提交。

$("#fileupload").on("change", function() {

$(this).parent().submit();

});

PHP

//通过$_FILES[]去获取文件

echo '$_FILES['file']';

遇到的坑：

序列化表单，因为是文件，不能通过val()，text()等方法获取到它的值，只能通过序列化表单提交。代码里面使用.serialize()，有另外一种做法是使用.FormData()来提交，但是实验过程中，一开始正常，后来报错了。在stackoverflow.com上有人看到有人遇到同样地问题，没有解决，于是就放弃了。

普通的ajax是没办法或者说很难拿到上传进度的。这里使用了一个插件jQuery Form Plugin，使用方法很简单，原本ajax的配置都能用，而且有很多实用功能和详尽的使用文档。推荐~

ajax上传图片这三个参数必须配置contentType: false, cache: false, processData:false,。

获取本地预览图，这种方法可能会有浏览器兼容性问题。

$("#fileupload").change(function(){

if (this.files && this.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$('#theImg').attr('src', e.target.result);

}

reader.readAsDataURL(this.files[0]);

}

}

php部分注意虽然Ajax那里使用的是POST方法，但是后台接受的时候只要是文件都是用$_FILES。你可以通过$_FILES['file']['type']去判断文件格式来做安全处理，我们这里只是演示。还有其他参数，比如tmp_name是文件路径，name是文件名。后台接收以后，你可以使用move_uploaded_file()来将文件保存到服务器上。这里就不多说。

如果提示： $(...).ajaxSubmit is not a function

页面js出现TypeError: $(...).ajaxSubmit is not a function 错误。

解决办法是：将jQuery-form.js文件引入页面即可。

jquery-form.js 下载地址：链接:http://pan.baidu.com/s/1ntHqJKP 密码: geb2

[Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

关于我们ajax异步请求的方法与知识

做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school ...

ajax异步导致js方法顺序执行不了

js两个方法调用的顺序,有时候是这样的 f1(); f2(); 本来是先执行f1的,但是如果f1里面进行ajax异步    async:true,那么可能会先执行f2,如果想要顺序执行,那么就把异步设 ...

ajax异步上传图片&SpringMVC后台代码

function uploadPic(){ var options = { url : "/upload/updatePic.action", type : "post& ...

ajax异步上传图片三种方案

转自:http://www.jb51.net/article/51180.htm 注:自己尝试了前两种,都可用: 目前常用的异步文件上传功能有几种,比较多见的如使用iframe框架形式,ajax功能效 ...

springmvc+ajax异步上传图片

1.javaweb传统的上传图片方式就是通过form表单提交

function upload() { var file1 = document.getElementB ...

随机推荐

WM_GETMINMAXINFO消息 中结构体MINMAXINFO

MINMAXINFO* lpMMI lpMMI->ptMaxSize.x = 800;  // 设置窗口最大化时的宽度 lpMMI->ptMaxSize.y = 600;  // 设置窗口 ...

设计模式-观察者模式(Observer)

简介: 观察者模式,也称为订阅-发布模式,定义对象间的一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖他的对象都得到通知并被自动更新. 主要由以下几个部分组成: a.Subject目标对象. ...

XTUOJ 1246 Heartstone 贪心

题意:挺好懂得 分析:先计算出如果不能用(减2)操作,至少需要多少个(减3)操作,这个很好计算 然后就是尽量多的去减少(减3)操作,肯定先抹平 余2 和 余1 的,然后就可以了 #include &l ...

OCP读书笔记(23) - 题库(ExamC)

200.Which operation requires that you create an auxiliary instance manually before executing the ope ...

Apache Zeppelin 初识

今天得知了一个Apache的孵化项目zeppelin,特了解一下. Zeppelin是一个Apache的孵化项目.一个基于web的笔记本,支持交互式数据分析.你可以用SQL.Scala等做出数据驱动的 ...

[转]数据对齐对CPU的影响

[转]http://www.cnblogs.com/wuzhenbo/archive/2012/06/05/2537465.html 1.前言 在IBM开发社区上发现一篇叫'Data alignmen ...

学习-HTML5

@@ 学习HTML5发现对我们开发工作者来说要方便很多,它现在还在发展阶段,在未来肯定会是主流. 我们知道HTML5目的是取代HTML4.01和XHTML1.0标准,他希望能够减少互联网富应用(RIA ...

extjs如何使用

刚学ExtJs 不知道如何使用.. 我的操作步骤如下: 1. 在项目中导入ExtJs 2. 创建了一个one.js 和 helloworld.html 3. one.js中的代码如下: Ext.Mes ...

Golang优秀开源项目汇总

https://blog.csdn.net/hackstoic/article/details/52008307

子Fragment获取父Fragment

在子Fragment操作父Fragment的思路 ((FragmentRecyclerBD)FragmentAppointmentBD.this.getParentFragment()).change ...