jQuery插件之ajaxFileUpload上传文件
jQuery插件之ajaxFileUpload上传文件
hello菜bird 发表于1年前
jQuery插件之ajaxFileUpload上传文件
  • 发表于 1年前
  • 阅读 87
  • 收藏 2
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

ajaxFileUpload.js 很多同名的,因为做出来一个很容易。

我用的是这个:https://github.com/carlcarl/AjaxFileUpload

下载地址在这里:http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar

AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。

异步上传的功能,选择它因为它的配置方式比较像jQuery的AJAX

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直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。

使用方法:mvc例子附带参数上传

<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>

后台代码:省略。。。

此实例在显示出异步上传图片的同时并弹出自定义传输的参数。本实例下载地址

今天调试过程中发现一个问题,就是作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的。如:正确的写法是<input type="file" id="file1" name="file1" />

最经典的错误终于找到原因所在了。Object function (a,b){return new e.fn.init(a,b,h)} has no method 'handleError',这个是google浏览器报的错误,非常经典, 不知道是我的版本问题还是真正存在的问题。这个问题的根源经过N次上传才找到问题的根本所在。答案是:dataType参数一定要大写。如:dataType: 'HTML'。

评论中的一个错误:TypeError: $.ajaxFileUpload is not a function   我们用的不是同一个JS,你下了别的AJAXFileUpload去了。

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 69
博文 122
码字总数 121148
×
hello菜bird
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: