本篇文章给大家谈谈jQuery插件ajaxFileUpload,以及jquery插件有哪些种类的知识点,同时本文还将给你拓展Asp.netMVC中使用JQuery插件ajaxFileUpload上传文
本篇文章给大家谈谈jQuery插件ajaxFileUpload,以及jquery插件有哪些种类的知识点,同时本文还将给你拓展Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件、jQuery异步上传文件插件ajaxFileUpload详细介绍、jQuery异步上传文件插件ajaxFileUpload详细介绍_jquery、jquery插件--ajaxfileupload.js等相关知识,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:- jQuery插件ajaxFileUpload(jquery插件有哪些种类)
- Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
- jQuery异步上传文件插件ajaxFileUpload详细介绍
- jQuery异步上传文件插件ajaxFileUpload详细介绍_jquery
- jquery插件--ajaxfileupload.js
jQuery插件ajaxFileUpload(jquery插件有哪些种类)
在处理数据的时候,我们会碰到类似需要ajax局部刷新的同时,把文件传递到后端处理。这时,我们就需要用到这个插件了。原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。
ajaxFileUpload是一个异步上传文件的jQuery插件
语法:$.ajaxFileUpload([options])
options参数说明:
1、url 上传处理程序地址。
2,fileElementId 需要上传的文件域的ID,即<input type="file">的ID。
3,secureuri 是否启用安全提交,默认为false。
4,dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6,error 提交失败自动执行的处理函数。
7,data 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, type 当要提交自定义参数时,这个参数要设置成post
错误提示:
1,SyntaxError: missing ; before statement错误
如果出现这个错误就需要检查url路径是否可以访问
2,SyntaxError: syntax error错误
如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误
3,SyntaxError: invalid property id错误
如果出现这个错误就需要检查文本域属性ID是否存在
4,SyntaxError: missing } in XML expression错误
如果出现这个错误就需要检查文件name是否一致或不存在
5,其它自定义错误
大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。
使用方法:
第一步:先引入jQuery与ajaxFileUpload插件。注意先后顺序,这个不用说了,所有的插件都是这样。
<script src="jquery-1.7.1.js" type="text/javascript"></script> <script src="ajaxfileupload.js" type="text/javascript"></script>
第二步:HTML代码:
<body> <p><input type="file" id="file1" name="file" /></p> <input type="button" value="上传" /> <p><img id="img1" alt="上传成功啦" src="" /></p> </body>
第三步:JS代码
<script src="jquery-1.7.1.js" type="text/javascript"></script> <script src="ajaxfileupload.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(":button").click(function () { ajaxFileUpload(); }) }) function ajaxFileUpload() { $.ajaxFileUpload ( { url: ''/upload.aspx'', //用于文件上传的服务器端请求地址 secureuri: false, //是否需要安全协议,一般设置为false fileElementId: ''file1'', //文件上传域的ID dataType: ''json'', //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { $("#img1").attr("src", data.imgurl); if (typeof (data.error) != ''undefined'') { if (data.error != '''') { alert(data.error); } else { alert(data.msg); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } ) return false; } </script>
第四步:后台页面upload.aspx代码:
protected void Page_Load(object sender, EventArgs e) { HttpFileCollection files = Request.Files; string msg = string.Empty; string error = string.Empty; string imgurl; if (files.Count > 0) { files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName)); msg = " 成功! 文件大小为:" + files[0].ContentLength; imgurl = "/" + files[0].FileName; string res = "{ error:''" + error + "'', msg:''" + msg + "'',imgurl:''" + imgurl + "''}"; Response.Write(res); Response.End(); } }
Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
0 ajaxFileUpload简介
ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:http://xiazai.jb51.net/201611/yuanma/ajaxfileupload(jb51.net).rar。
整个插件源码不到200行,实现非常简单,大致原理就是通过js动态创建隐藏的表单,然后进行提交操作,达到附件上传的目的,主要实现在源码里都有注释,不难理解,我们也可以基于此简单版本实现更复杂的操作。
1 ajaxFileUpload使用说明
ajaxFileUpload的使用也很简单,调用ajaxFileUpload方法即可,各配置项详细说明如下:
$.ajaxFileUpload({ type: "post",//请求类型:post或get,当要使用data提交自定义参数时一定要设置为post url: "/Shared/Upload",//文件上传的服务器端请求地址 secureuri: false,//是否启用安全提交,一般默认为false就行,不用特殊处理 fileElementId: "filePicture",//文件上传控件的id <input type="file" id="filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" /> dataType: "json",//返回值类型,一般设置为json,还支持html\xml\script类型 data: { "id": "1","name": "test" },//用于post请求提交自定义参数 success: function (data,status) { //服务器成功响应处理函数 },error: function (data,status,e) { //服务器响应失败处理函数 } });
首先在页面添加对JQuery及ajaxFileUpload的引用,这里的JQuery用的2.1.4版本,经测试用各个版本基本没什么影响。
<script src="../../Content/js/jquery-2.1.4.min.js"></script>
<script src="../../Content/js/ajaxfileupload.js"></script>
页面添加类型为file的input标签
通过accept可以限定打开文件选择对话框后,默认能选择的文件类型。文件类型的定义主要有以下这些
*.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video
*.ac3 audio/ac3 AC3 Audio
*.asf allpication/vnd.ms-asf Advanced Streaming Format
*.au audio/basic AU Audio
*.css text/css Cascading Style Sheets
*.csv text/csv Comma Separated Values
*.doc application/msword MS Word Document
*.dot application/msword MS Word Template
*.dtd application/xml-dtd Document Type DeFinition
*.dwg image/vnd.dwg AutoCAD Drawing Database
*.dxf image/vnd.dxf AutoCAD Drawing Interchange Format
*.gif image/gif Graphic Interchange Format
*.htm text/html HyperText MarkuP Language
*.html text/html HyperText MarkuP Language
*.jp2 image/jp2 JPEG-2000
*.jpe image/jpeg JPEG
*.jpeg image/jpeg JPEG
*.jpg image/jpeg JPEG
*.js text/javascript, application/javascript JavaScript
*.json application/json JavaScript Object Notation
*.mp2 audio/mpeg, video/mpeg MPEG Audio/Video Stream, Layer II
*.mp3 audio/mpeg MPEG Audio Stream, Layer III
*.mp4 audio/mp4, video/mp4 MPEG-4 Audio/Video
*.mpeg video/mpeg MPEG Video Stream, Layer II
*.mpg video/mpeg MPEG Video Stream, Layer II
*.mpp application/vnd.ms-project MS Project Project
*.ogg application/ogg, audio/ogg Ogg Vorbis
*.pdf application/pdf Portable Document Format
*.png image/png Portable Network Graphics
*.pot application/vnd.ms-powerpoint MS PowerPoint Template
*.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow
*.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation
*.rtf application/rtf, text/rtf Rich Text Format
*.svf image/vnd.svf Simple Vector Format
*.tif image/tiff Tagged Image Format File
*.tiff image/tiff Tagged Image Format File
*.txt text/plain Plain Text
*.wdb application/vnd.ms-works MS Works Database
*.wps application/vnd.ms-works Works Text Document
*.xhtml application/xhtml+xml Extensible HyperText MarkuP Language
*.xlc application/vnd.ms-excel MS Excel Chart
*.xlm application/vnd.ms-excel MS Excel Macro
*.xls application/vnd.ms-excel MS Excel Spreadsheet
*.xlt application/vnd.ms-excel MS Excel Template
*.xlw application/vnd.ms-excel MS Excel Workspace
*.xml text/xml, application/xml Extensible MarkuP Language
*.zip aplication/zip Compressed Archive
我这里没有单独放上传按钮,添加了onchange事件,在选择文件后立即上传文件,onchange时间定义如下。
function filePictureChange() { $.ajaxFileUpload({ url: "/Shared/Upload",//用于文件上传的服务器端请求地址 type: "post",secureuri: false,//一般设置为false fileElementId: "filePicture",//文件上传空间的id属性 dataType: "json",//返回值类型 一般设置为json success: function (data,status) { //服务器成功响应处理函数 alert(data.fileName); alert(data.filePath); alert(data.fileSize); },e){ //服务器响应失败处理函数 alert(e); } }); };
后台控制器处理方法如下,使用MD5处理,判断文件是否已经存在,避免文件重复上传。
/// <summary> /// 附件上传 /// </summary> /// <returns></returns> public ActionResult Upload() { HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; if (files.Count == 0) return Json("Faild",JsonRequestBehavior.AllowGet); MD5 md5Hasher = new MD5CryptoServiceProvider(); /*计算指定Stream对象的哈希值*/ byte[] arrbytHashValue = md5Hasher.ComputeHash(files[0].InputStream); /*由以连字符分隔的十六进制对构成的String,其中每一对表示value中对应的元素;例如“F-2C-4A”*/ string strHashData = System.BitConverter.ToString(arrbytHashValue).Replace("-",""); string FileEextension = Path.GetExtension(files[0].FileName); string uploadDate = DateTime.Now.ToString("yyyyMMdd"); string virtualPath = string.Format("/Data/ComponentAttachments/{0}/{1}{2}",uploadDate,strHashData,FileEextension); string fullFileName = Server.MapPath(virtualPath); //创建文件夹,保存文件 string path = Path.GetDirectoryName(fullFileName); Directory.CreateDirectory(path); if (!System.IO.File.Exists(fullFileName)) { files[0].SaveAs(fullFileName); } string fileName = files[0].FileName.Substring(files[0].FileName.LastIndexOf("\\") + 1,files[0].FileName.Length - files[0].FileName.LastIndexOf("\\") - 1); string fileSize = GetFileSize(files[0].ContentLength); return Json(new { FileName = fileName,FilePath = virtualPath,FileSize = fileSize },"text/html",JsonRequestBehavior.AllowGet); } /// <summary> /// 获取文件大小 /// </summary> /// <param name="bytes"></param> /// <returns></returns> private string GetFileSize(long bytes) { long kblength = 1024; long mbLength = 1024 * 1024; if (bytes < kblength) return bytes.ToString() + "B"; if (bytes < mbLength) return decimal.Round(decimal.Divide(bytes,kblength),2).ToString() + "KB"; else return decimal.Round(decimal.Divide(bytes,mbLength),2).ToString() + "MB"; }
2 ajaxFileUpload使用过程中的一些问题
2.0 jQuery.handleError is not a function
解决方法:
经测试handlerError只在jquery-1.4.2之前的版本中存在,以后版本中都没有这个函数了,因此在将handleError这个函数复制到ajaxFileUpload.js中,就行了
uploadHttpData: function (r,type) { var data = !type; data = type == "xml" || data ? r.responseXML : r.responseText; // If the type is "script",eval it in global context if (type == "script") jQuery.globalEval(data); // Get the JavaScript object,if JSON is used. if (type == "json") eval("data = " + data); //eval("data = \"" + data + "\""); // evaluate scripts within html if (type == "html") jQuery("<div>").html(data).evalScripts(); return data; },handleError: function (s,xhr,e) { // If a local callback was specified,fire it if (s.error) { s.error.call(s.context || s,e); } // Fire the global callback if (s.global) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError",[xhr,s,e]); } }
更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。
jQuery异步上传文件插件ajaxFileUpload详细介绍
一、ajaxFileUpload是一个异步上传文件的jQuery插件。
传一个不知道什么版本的上来,以后不用到处找了。
语法:$.ajaxFileUpload([options])
options参数说明:
1、url 上传处理程序地址。 2,fileElementId 需要上传的文件域的ID,即默认为false。 4,dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。 5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。 6,error 提交失败自动执行的处理函数。 7,data 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。 8,type 当要提交自定义参数时,这个参数要设置成post
错误提示:
1,SyntaxError: missing ; before statement错误 如果出现这个错误就需要检查url路径是否可以访问 2,SyntaxError: Syntax error错误 如果出现这个错误就需要检查处理提交操作的服务器后台处理程序是否存在语法错误 3,SyntaxError: invalid property id错误 如果出现这个错误就需要检查文本域属性ID是否存在 4,SyntaxError: missing } in XML expression错误 如果出现这个错误就需要检查文件name是否一致或不存在 5,其它自定义错误 大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。
使用方法:
第一步:先引入jQuery与ajaxFileUpload插件。注意先后顺序,这个不用说了,所有的插件都是这样。
第四步:后台页面upload.aspx代码: