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

jQuery文件上传插件ajaxFileUpload ---谷营中西软件科技园

2016-04-05 22:06 721 查看

1.插件简介

wanzuwodou友情提示:

使用该插件的时候需要js版本和ajaxFileUpload插件的版本一致，直接从官网上下载相应的版本即可。下载步骤略。。。。

ajaxFileUpload是一个异步上传文件的jQuery插件。该插件使用非常简单。

语法：

：$.ajaxFileUpload([参数])

参数说明：

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

使用方法：

　第1步：引入jQuery与ajaxFileUpload插件。注意先后顺序，先引入jQuery插件，在引入ajaxFileUpload插件。所有的jQuery插件都这样。

　

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

第2步：页面代码书写：

<body>
<p><input type="file" id="file" name="file" /></p>
<input type="button" value="上传图片" />
<p><img id="img" alt="上传成功啦" src="" /></p>
</body>

第三步js代码：

<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
ajaxFileUpload();
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/fileUpload', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'file', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status)  //服务器成功响应处理函数
{
$("#img").attr("src", data.imgurl);
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>

第4步：后台controller代码：

@RequestMapping(value = "/fileUpload")
public String fileUploads(@RequestParam MultipartFile[] files,
HttpServletRequest request, HttpServletResponse response) throws IOException {
//可以在上传文件的同时接收其它参数
Map<String, Object> map = Maps.newHashMap();
try {
map = com.leimingtech.core.common.FileUtils.fileUpload(files,
CommonConstants.FILE_BASEPATH, Constants.LOGO_UPLOAD_URL, request,"images",1);
} catch (IOException e) {
e.printStackTrace();
log.error("上传文件失败", e.toString());
}
String json = JsonUtils.toJsonStr(map);
response.setContentType("text/html");
response.getWriter().write(json);

return null;
}

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

标签：

相关文章推荐

新的分享

章节导航