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

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

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

<p> 
<label>上传图片</label> 
<input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /> 
<input type="button" id="uploadbutton" value="upload" /> 
</p> 
<script type="text/javascript"> 
$(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; 
}); 
}); 
</script>

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

方法二：使用ajaxfileupload.js插件

html代码：

<p> 
<label>ajax上传</label> 
<input type="file" name="filetoupload" id="filetoupload" class="inp_filetoupload" multiple="multiple"/> 
<img src="$web.site$web.tpl#**#adminht/images/lb_head.jpg" width="30px" height="30px" class="img_upload" id="img" /> 
</p> 
<p> 
<label>最新修改人员：</label> 
<input readonly="readonly" type="text" size="30" /> 
</p> 
<div> 

<script type="text/javascript"> 
$(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; 
} 
</script> 
</div> 
</div>

说明：这种方法目前测试支持ie8/9,谷歌，兼容比方法1好。建议采用方法2

文件上传后台处理代码（asp.net版）

<%@ webhandler language="c#" class="upload" %> 

using system; 
using system.collections; 
using system.web; 
using system.io; 
using system.globalization; 
using litjson; 
public class upload : ihttphandler 
{ 
private httpcontext context; 
public void processrequest(httpcontext context) 
{ 
string aspxurl = context.request.path.substring(0, context.request.path.lastindexof("/") + 1); 

//文件保存目录路径 
string savepath = "attached/"; 
//文件保存目录url 
string saveurl = aspxurl + "attached/"; 
//定义允许上传的文件扩展名 
hashtable exttable = new hashtable(); 
exttable.add("image", "gif,jpg,jpeg,png,bmp"); 
exttable.add("flash", "swf,flv"); 
exttable.add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); 
exttable.add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); 
//最大文件大小 
int maxsize = 1000000; 
this.context = context; 
httppostedfile imgfile = context.request.files["imgfile"]; 
if (imgfile == null) 
{ 
showerror("请选择文件。"); 
} 
string dirpath = context.server.mappath(savepath); 
if (!directory.exists(dirpath)) 
{ 
showerror("上传目录不存在。"); 
} 
string dirname = context.request.querystring["dir"]; 
if (string.isnullorempty(dirname)) { 
dirname = "image"; 
} 
if (!exttable.containskey(dirname)) { 
showerror("目录名不正确。"); 
} 
string filename = imgfile.filename; 
string fileext = path.getextension(filename).tolower(); 
if (imgfile.inputstream == null || imgfile.inputstream.length > maxsize) 
{ 
showerror("上传文件大小超过限制。"); 
} 
if (string.isnullorempty(fileext) || array.indexof(((string)exttable[dirname]).split(','), fileext.substring(1).tolower()) == -1) 
{ 
showerror("上传文件扩展名是不允许的扩展名。\n只允许" + ((string)exttable[dirname]) + "格式。"); 
} 
//创建文件夹 
dirpath += dirname + "/"; 
saveurl += dirname + "/"; 
if (!directory.exists(dirpath)) { 
directory.createdirectory(dirpath); 
} 
string ymd = datetime.now.tostring("yyyymmdd", datetimeformatinfo.invariantinfo); 
dirpath += ymd + "/"; 
saveurl += ymd + "/"; 
if (!directory.exists(dirpath)) { 
directory.createdirectory(dirpath); 
} 
string newfilename = datetime.now.tostring("yyyymmddhhmmss_ffff", datetimeformatinfo.invariantinfo) + fileext; 
string filepath = dirpath + newfilename; 
imgfile.saveas(filepath); 
string fileurl = saveurl + newfilename; 
hashtable hash = new hashtable(); 
hash["error"] = 0; 
hash["url"] = fileurl; 
context.response.addheader("content-type", "text/html; charset=utf-8"); 
context.response.write(jsonmapper.tojson(hash)); 
context.response.end(); 
} 
private void showerror(string message) 
{ 
hashtable hash = new hashtable(); 
hash["error"] = 1; 
hash["message"] = message; 
context.response.addheader("content-type", "text/html; charset=utf-8"); 
context.response.write(jsonmapper.tojson(hash)); 
context.response.end(); 
} 
public bool isreusable 
{ 
get 
{ 
return true; 
} 
} 
}