jQuery插件之ajaxFileUpload

桃扇骨 2022-06-01 23:58 239阅读 0赞

jQuery插件之ajaxFileUpload  
ajaxFileUpload.js 很多同名的，因为做出来一个很容易。  
我用的是这个:[https://github.com/carlcarl/AjaxFileUpload][https_github.com_carlcarl_AjaxFileUpload]  
下载地址在这里：[http://files.cnblogs.com/files/kissdodog/ajaxfileupload\_JS\_File.rar][http_files.cnblogs.com_files_kissdodog_ajaxfileupload_JS_File.rar]  
AjaxFileUpload.js并不是一个很出名的插件，只是别人写好的放出来供大家用，原理都是创建隐藏的表单和iframe然后用JS去提交，获得返回值。  
当初做了个异步上传的功能，选择它因为它的配置方式比较像jQuery的AJAX，我很喜欢。  
评论里面说到的不行。那是因为我们用的不是同一个js。我上github搜AjaxFileUpload出来很多类似js。  
ajaxFileUpload是一个异步上传文件的jQuery插件  
　　传一个不知道什么版本的上来，以后不用到处找了。  
　　语法：.ajaxFileUpload(\[options\])    
　　options参数说明：    
1、url　　　　　　　　　　  上传处理程序地址。　　    
2，fileElementId　　　　　  需要上传的文件域的ID，即的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插件。注意先后顺序，这个不用说了，所有的插件都是这样。

第三步：JS代码

第四步：后台页面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();
                }
            }

本实例完整代码下载  
来一个MVC版本的实例：  
控制器代码

public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult Upload()
            {
                HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
                string imgPath = "";
                if (hfc.Count > 0)
                {
                    imgPath = "/testUpload" + hfc[0].FileName;
                    string PhysicalPath = Server.MapPath(imgPath);
                    hfc[0].SaveAs(PhysicalPath);
                }
                return Content(imgPath);
            }
        }

前端视图，HTML与JS代码，成功上传后，返回图片真实地址并绑定到的SRC地址

<html><head>
        <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 () { if ($("#file1").val().length > 0) { ajaxFileUpload(); } else { alert("请选择图片"); } }) }) function ajaxFileUpload() { $.ajaxFileUpload ( { url: '/Home/Upload', //用于文件上传的服务器端请求地址 secureuri: false, //一般设置为false fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" /> dataType: 'HTML', //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { alert(data); $("#img1").attr("src", data); 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></head><body>
        <p><input type="file" id="file1" name="file" /></p>
        <input type="button" value="上传" />
        <p><img id="img1" alt="上传成功啦" src="" /></p></body></html>

最后再来一个上传图片且附带参数的实例：控制器代码：

public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult Upload()
            {
                NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;
    
                HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
                string imgPath = "";
                if (hfc.Count > 0)
                {
                    imgPath = "/testUpload" + hfc[0].FileName;
                    string PhysicalPath = Server.MapPath(imgPath);
                    hfc[0].SaveAs(PhysicalPath);
                }
                //注意要写好后面的第二第三个参数
                return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
            }
        }

Index视图代码:

<html><head>
        <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 () { if ($("#file1").val().length > 0) { ajaxFileUpload(); } else { alert("请选择图片"); } }) }) function ajaxFileUpload() { $.ajaxFileUpload ( { url: '/Home/Upload', //用于文件上传的服务器端请求地址 type: 'post', data: { Id: '123', name: 'lunis' }, //此参数非常严谨，写错一个引号都不行 secureuri: false, //一般设置为false fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" /> dataType: 'json', //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { alert(data); $("#img1").attr("src", data.imgPath1); alert("你请求的Id是" + data.Id + " " + "你请求的名字是:" + data.name); 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></head><body>
        <p><input type="file" id="file1" name="file" /></p>
        <input type="button" value="上传" />
        <p><img id="img1" alt="上传成功啦" src="" /></p></body></html>

[https_github.com_carlcarl_AjaxFileUpload]: https://github.com/carlcarl/AjaxFileUpload
[http_files.cnblogs.com_files_kissdodog_ajaxfileupload_JS_File.rar]: http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar