自己动手打造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插件

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; 

} 

} 

}