您的位置:首页 > 其它

ajaxfileupload -- 一款不错的AJAX文件上传插件

2017-04-14 15:34 537 查看
网上非常多关于该插件的介绍,我这里简单介绍一下吧。(个人观点)

ajaxfileupload插件主要是用ajax上传文件(图片)到服务器,通过插件创建的隐藏的表单和iframe来提交,然后获得返回值,它是一款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.js 

<script  type="text/javascript" src="js/jquery.min.js"></script>
<script  type="text/javascript" src="js/ajaxfileupload.js"></script>


推荐ajaxfileuploap.js的文件下载地址:http://download.csdn.net/detail/baidu_25343343/9814096

第二步:
HTML代码:

<input type="file"  name="file" >



注意:<input type="file">这个标签必须要有name值,最好也是file,不然可能无法上传文件(图片)到服务器

第三步:
js代码:
 $.ajaxFileUpload

            (

                {

                    url: url, //用于文件上传的服务器端请求地址

                    secureuri: false, //是否需要安全协议,一般设置为false

                    fileElementId: 'file', //文件上传域的ID

                    dataType: 'json', //返回值类型 一般设置为json

                    data:{ 
 //请求参数

                        

                    },

                    success: function (data, status,e)  //服务器成功响应处理函数

                    {

                       

                        //data是服务器返回的数据

                    },

                    error: function (data, status, e)//服务器响应失败处理函数

                    {

//data是服务器返回的数据

               

                    }

                }

            );

这里是简单的介绍如何使用。。。
具体的例如:
1.输入框的样式  2.上传文件按钮  3.上传成功或者上传失败之后的回调函数 。。。
这些都要读者自己去思考。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息