今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的。于是就自己动手写了一个。
方法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插件
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;
}