文档章节

jQuery插件之ajaxFileUpload上传文件

1
 1024菜bird
发布于 2016/12/01 15:24
字数 985
阅读 378
收藏 2

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去了。

© 著作权归作者所有

1
粉丝 79
博文 144
码字总数 139211
作品 0
海淀
程序员
私信 提问
加载中

评论(0)

ajaxfileupload.js异步上传

转载:https://www.cnblogs.com/labimeilexin/p/6742647.html jQuery插件之ajaxFileUpload ajaxFileUpload.js 很多同名的,因为做出来一个很容易。 我用的是这个:https://github.com/carlcar......

osc_b1y21l0d
2019/02/22
10
0
jQuery插件AjaxFileUpload实现ajax文件上传

1、引入AjaxFileUpload插件相关的js <script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script><script type="text/javascript" src="<%=basePath%>resou......

刘yu
2015/04/22
367
0
ajaxfileupload多文件上传 - 修复只支持单个文件上传的bug

搜索: jquery ajaxFileUpload AjaxFileUpload同时上传多个文件 原生的AjaxFileUpload插件是不支持多文件上传的,通过修改AjaxFileUpload少量代码就能实现多文件同时上传 AjaxFileUpload插件...

osc_cnw29rq0
2019/03/15
9
0
jQuery插件之ajaxFileUpload API文档

ajaxFileUpload是一个异步上传文件的jQuery插件。 语法:$.ajaxFileUpload([options]) options参数说明: 1、url           上传处理程序地址。   2,fileElementId      ...

osc_uhmvp9bs
2018/08/07
10
0
ajaxFileUpload.js 使用报错

按照网上写的配置了ajaxFileUpload ,但是一点上传按钮就报错:TypeError: $.ajaxFileUpload is not a function function ajaxFileUpload(){ $("#loading").ajaxStart(function(){ $(this).......

menxin
2014/02/19
4.8K
5

没有更多内容

加载失败,请刷新页面

加载更多

Linux中实用但很小众的11个炫酷终端命令

今天给大家分享Linux总结出来的11个炫酷的Linux终端命令大全,通过今天这篇文章将向大家展示一系列的Linux命令、工具和技巧,我希望一开始就有人告诉我这些,而不是曾在我成长道路上绊住我。...

osc_50znnx42
2分钟前
0
0
GPRS(Air202) Lua开发: GPIO中断

1.原理图 2.配置GPIO5中断,上拉输入 1.点击按钮进入下降沿中断 2.松开按钮进入上升沿中断 module(...,package.seeall) --固定写法,具体百度lua文件加载(初学者不需要考虑,直接写上这句话即可...

osc_mf7xwvy6
4分钟前
9
0
相机激光标定算法:从理论到实践

点击上方“3D视觉工坊”,选择“星标” 干货第一时间送达 本文是标定系列解读第三篇,介绍了Camera-Lidar标定,通过对一些基础知识和小细节进行讨论和理论推导,给出了一些可以提升标定精度的...

osc_s2b5kacl
5分钟前
7
0
webpack4.0 把自己总结'吐'的一篇文章

上大学的时候老师讲一门语言,上来的第一节课就是配置各种环境,而通常看到那些脑袋都是一种快要炸的状态🤯。随着后来对Linux的学习之后发现,并没有那么头疼配置的东西(对于命令这么复杂...

osc_mor4smaq
7分钟前
11
0
实现一个“真”的网页

@一个“真”的网页 实现一个真的网页~ 经过了前几次的实验,相信大家已经对网页布局有了初步的了解,那么这一次就让我们来做个“真网页”吧!复制代码 文章展示页是非常非常常见的东西,几...

osc_7ekszy4a
8分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部