生活随笔
收集整理的這篇文章主要介紹了
jQuery插件ASP.NET应用之AjaxUpload
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本次使用AJAXUPLOAD做為上傳客戶端無刷上傳插件，其最新版本為3.9，官方地址：http://valums.com/ajax-upload/
在頁面中引入 jquery.min.1.4.2.js 和 ajaxupload.js
?
Html代碼??
<script?src="Scripts/jquery-1.4.2.min.js"?type="text/javascript"></script>??<script?src="Scripts/ajaxupload3.9.js"?type="text/javascript"></script>?? ?HTML 代碼：
Html代碼??
<style?type="text/css">??????????#txtFileName?{??????????????width:?300px;??????????}??????????.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;}??????</style>????上傳圖片：<input?type="text"?id="txtFileName"?/><div??id="btnUp"?style="width:300px;"?class=btnsubmit?>瀏覽</div>????<div?id="imglist"></div>?? ?js代 碼：
Js代碼??
<script?type="text/javascript">????????$(function?()?{??????????var?button?=?$('#btnUp'),?interval;??????????new?AjaxUpload(button,?{??????????????????????????action:?'/handler/AjaxuploadHandler.ashx',??????????????name:?'myfile',??????????????onSubmit:?function?(file,?ext)?{??????????????????if?(!(ext?&&?/^(jpg|jpeg|JPG|JPEG)$/.test(ext)))?{??????????????????????alert('圖片格式不正確,請選擇?jpg?格式的文件!',?'系統提示');??????????????????????return?false;??????????????????}????????????????????????????????????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)?{??????????????????????????????????button.text('上傳圖片(只允許上傳JPG格式的圖片,大小不得大于150K)');????????????????????????????????????window.clearInterval(interval);????????????????????????????????????this.enable();????????????????????var?k?=?response.replace("<PRE>",?"").replace("</PRE>",?"");????????????????????if?(k?==?'-1')?{??????????????????????alert('您上傳的文件太大啦!請不要超過150K');??????????????????}??????????????????else?{??????????????????????alert("服務器端傳回的串："+k);??????????????????????alert("本地文件名稱："+file);??????????????????????$("#txtFileName").val(k);??????????????????????$("<img?/>").appendTo($('#imglist')).attr("src",?k);??????????????????}??????????????}??????????});????????});??</script>?? ?服務器端 ajaxuploadhandler.ashx 代碼
Js代碼??
public?void?ProcessRequest(HttpContext?context)??????????{??????????????context.Response.ContentType?=?"text/plain";????????????????HttpPostedFile?postedFile?=?context.Request.Files[0];??????????????string?savePath?=?"/upload/images/";??????????????int?filelength?=?postedFile.ContentLength;??????????????int?fileSize?=?163600;?????????????string?fileName?=?"-1";?????????????if?(filelength?<=?fileSize)??????????????{????????????????????byte[]?buffer?=?new?byte[filelength];????????????????????postedFile.InputStream.Read(buffer,?0,?filelength);????????????????????fileName?=?UploadImage(buffer,?savePath,?"jpg");????????????????}????????????????context.Response.Write(fileName);??????????}????????????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;??????????} ?
總結
以上是生活随笔為你收集整理的jQuery插件ASP.NET应用之AjaxUpload的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
