您的位置：首页 > Web前端 > JQuery

jQuery插件之ajaxFileUpload上传文件

2016-12-01 00:00 741 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航