AjaxUpload实现前台上传文件
最近一直在烦恼怎么在前台实现无刷新上传文件，在网上查看了很多方法后觉得有两种方法比较合意，一种是html5 javascript API，但是由于目前浏览器对html5的支持还不是很好，便放弃了。还有一种就是JQuery的控件AjaxUpload.js，但是只实现了单个文件上传，想实现多文件上传，但一直无果。如果大家有好的方法实现多文件上传，欢迎指教！
下面分享一下自己做的，希望对大家有所帮助。
Default.aspx：
首先引入js文件
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script src="ajaxupload.js" type="text/javascript"></script>
<style type="text/css">
.btnsubmit
{
border-bottom: #cc4f00 1px solid;
border-left: #ff9000 1px solid;
border-top: #ff9000 1px solid;
border-right: #cc4f00 1px solid;
text-align: center;
padding: 2px 10px;
line-height: 16px;
background: #e36b0f;
height: 24px;
color: #fff;
font-size: 12px;
cursor: pointer;
}//www.heatpress123.net
</style>
<script type="text/javascript">
$(function() {
var button = $('#btnUp');
var interval;
var uploadObj = new AjaxUpload(button, {
action: 'AjaxuploadHandler.ashx', //要提交到的处理页面
name: 'myfile', //提交的名字
type:"POST",//提交方式
onChange: function(file, ext) {//当选择文件后执行的方法,ext存在文件后续,可以在这里判断文件格式
if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {
alert('图片格式不正确,请选择 jpg 格式的文件!', '系统提示');
return false;
}
$("#text").val(file);
},
autoSubmit: false, //设置不自动上传
onSubmit: function(file, ext) {//上传文件
button.text('上传中');
this.disable();
interval = window.setInterval(function() {
var text = button.text();
if (text.length < 10) {
button.text(text + '.');
} else {
button.text('上传中');
}
}, 200);
},
onComplete: function(file, response) {//上传成功后。file 本地文件名称，response 服务器端传回的信息
button.text('上传成功');
window.clearInterval(interval);
this.enable();
var k = response.replace("<PRE>", "").replace("</PRE>", "").replace("<pre>", "").replace("</pre>", "");
if (k !=null){
alert("服务器端传回的串：" + k);
$("#txtFileName").val(k);
}
}
});
$("#btnUpload").click(function() {
uploadObj.submit(); //触发上传
})
});
</script>
Body中：
<form id="form1" runat="server">
<input id="text" type="text" />
<div id="btnUp" style="width: 300px;" class="btnsubmit">
浏览
</div>
<input id="btnUpload" type="button" value="上传" />
<input type="text" id="txtFileName" />
</form>
AjaxuploadHandler.ashx.cs:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile postedFile = context.Request.Files[0];//接收文件
string savePath = "/upload/images/";
int filelength = postedFile.ContentLength;//文件的长度
string fileName = postedFile.FileName;//文件名
string ext = fileName.Substring(fileName.LastIndexOf("."));
byte[] buffer = new byte[filelength];//创建缓存
postedFile.InputStream.Read(buffer, 0, filelength);
string path = UploadImage(buffer, savePath, ext);
context.Response.Write(path);//返回文件在服务器上的路径
}
public static string UploadImage(byte[] imgBuffer, string uploadpath, string ext)
{
try
{
System.IO.MemoryStream m = new MemoryStream(imgBuffer);
//如果服务器上不存在该路径，创建路径
if (!Directory.Exists(HttpContext.Current.Server.MapPath(uploadpath)))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath(uploadpath));
}
string imgname = CreateIDCode() + ext;
string _path = HttpContext.Current.Server.MapPath(uploadpath) + imgname;
Image img = Image.FromStream(m);
if (ext == ".jpg")
{
img.Save(_path, System.Drawing.Imaging.ImageFormat.Jpeg);
}
else
{
img.Save(_path, System.Drawing.Imaging.ImageFormat.Gif);
}
m.Close();
return uploadpath + imgname;
}
catch (Exception ex)
{
return ex.Message;
}
}
public static string CreateIDCode()
{
DateTime Time1 = DateTime.Now.ToUniversalTime();
DateTime Time2 = Convert.ToDateTime("1970-01-01");
TimeSpan span = Time1 - Time2;
string t = span.TotalMilliseconds.ToString("0");
return t;
}
public bool IsReusable
{
get
{
return false;
}
}
