没有多张上传图片的ajax,自己动手打造ajax图片上传(网上没有的)

今天笔者需要一款图片上传插件，但是网上没有提供一款符合自己需求且好用的。于是就自己动手写了一个。

方法1，仅使用jquery代码，不用第三方插件。代码如下

上传图片

$(function() {

$('.inp_fileToUpload').change(function() {

var formdata = new FormData();

var v_this = $(this);

var fileObj = v_this.get(0).files;

url = "/upload/upload_json.ashx";

//var fileObj=document.getElementById("fileToUpload").files;

formdata.append("imgFile", fileObj[0]);

jQuery.ajax({

url : url,

type : 'post',

data : formdata,

cache : false,

contentType : false,

processData : false,

dataType : "json",

success : function(data) {

if (data.error == 0) {

v_this.parent().children(".img_upload").attr("src", data.url);

//$("#img").attr("src",data.url);

}

}

});

return false;

});

});

这种方法的缺点：由于IE6\8\9\不支持formdata，所以这种方法不支持IE9及以下版本

方法二：使用ajaxfileupload.js插件

ajaxfileupload.js

html代码：

ajax上传

最新修改人员：

$(function() {

$(".inp_fileToUpload").live("change", function() {//现在这个已经适用于多个file表单。

ajaxFileUpload($(this).attr("id"), $(this).parent().children(".img_upload").attr("id"));

})

})

function ajaxFileUpload(file_id, img_id) {

jQuery.ajaxFileUpload({

url : '/upload/upload_json.ashx', //用于文件上传的服务器端请求地址

secureuri : false, //是否需要安全协议，一般设置为false

fileElementId : file_id, //文件上传域的ID

dataType : 'json', //返回值类型 一般设置为json

success : function(data, status)//服务器成功响应处理函数

{

if (data.error == 0) {

$("#" + img_id).attr("src", data.url);

} else {

alert(data.message);

}

},

error : function(data, status, e)//服务器响应失败处理函数

{

alert(e);

}

})

return false;

}