首页 > 代码库 > jQuery插件ASP.NET应用之AjaxUpload
jQuery插件ASP.NET应用之AjaxUpload
本次使用AJAXUPLOAD做为上传客户端无刷上传插件,其最新版本为3.9,官方地址:http://valums.com/ajax-upload/
在页面中引入 jquery.min.1.4.2.js 和 ajaxupload.js
Html代码
- <script src=http://www.mamicode.com/"Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
- <script src=http://www.mamicode.com/"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: ‘upload-test.php‘,文件上传服务器端执行的地址
- action: ‘/handler/AjaxuploadHandler.ashx‘,
- name: ‘myfile‘,
- onSubmit: function (file, ext) {
- if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {
- alert(‘图片格式不正确,请选择 jpg 格式的文件!‘, ‘系统提示‘);
- return false;
- }
- // change button text, when user selects file
- button.text(‘上传中‘);
- // If you want to allow uploading only 1 file at time,
- // you can disable upload button
- this.disable();
- // Uploding -> Uploading. -> Uploading...
- 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(‘上传图片(只允许上传JPG格式的图片,大小不得大于150K)‘);
- window.clearInterval(interval);
- // enable upload button
- 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; //150K
- 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; //span就是两个日期之间的差额
- string t = span.TotalMilliseconds.ToString("0");
- return t;
- }
jQuery插件ASP.NET应用之AjaxUpload
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。