使用ajaxfileupload.js实现文件上传

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

第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序

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

第二步：HTML代码：

<input type="file" id="file1" name="pay"   οnchange="ajaxFileUpload()" />

第三步：JS代码

<script type="text/javascript">function ajaxFileUpload() {$.ajaxFileUpload({url: 'uploadPayorder', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: 'file1', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data)  //服务器成功响应处理函数
                    {if (typeof (data.error) != 'undefined') {if (data.error != '') {alert(data.error);} else {alert(data.msg);}}},error: function (data)//服务器响应失败处理函数
                    {alert('失败');}})return false;}</script>

第四步、java代码

public String uploadPayorderImg(){String payorder=null;Map<String,Object> map= new HashMap<String,Object>();JSONObject json = null;//将map对象转换成json类型数据try {payorder = new uploadImg().upload(pay, payFileName, payContentType, "/upload");System.out.println(payorder);boolean r=true;if(r){map.put("result", "success");json=JSONObject.fromObject(map);result = json.toString();//给result赋值，传递给页面}else{map.put("result", "error");result = null;//给result赋值，传递给页面
            }} catch (FileNotFoundException e) {result = null;e.printStackTrace();} catch (IOException e) {result = null;e.printStackTrace();}return SUCCESS;}

建议采用jQuery1.7以上的版本

ajaxfileupload.js下载地址：http://download.csdn.net/detail/qq_33347991/9706564

转载于:https://www.cnblogs.com/bunuo/p/6148473.html

使用ajaxfileupload.js实现文件上传相关推荐

php ajaxfileupload.js 使用,ajaxfileupload.js实现文件上传（附步骤代码）
这次给大家带来ajaxfileupload.js实现文件上传(附步骤代码),ajaxfileupload.js实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. AjaxUpLoad.js ...
ajaxFileUpload+struts2多文件上传(动态添加文件上传框)
上一篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但仅仅是固定的文件个数 ...
html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
js如何上传大文件到服务器,js将文件上传到远程服务器
js将文件上传到远程服务器内容精选换一换将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云 ...
php 美化js文件,js实现文件上传表单域美化特效_javascript技巧
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...
vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传内容精选换一换开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
js判断文件上传的类型
js判断文件上传的类型 /*** @param: fileName - 文件名称* @param: 数据返回 1) 无后缀匹配 - false* @param: 数据返回 2) 匹配图片 - imag ...
通过ajaxFileUpload异步请求上传文件（ajaxFileUpload+servlet实现文件上传下载）
1.最终效果实现选择图片(此处以图片为例,支持所有类型文件的上传),选择之后将选择的图片在页面中显示出来,点击上传,可以将文件上传到指定的地址中,上传成功后在当前页面自动显示下载标签. 源码下载地址 ...
Node.js中文件上传与multer模块的应用
必要:首先multer模块应用前提是在HTML的form表单中标签内设置属性enctype="multipart/form-data"是必须的,这样才可以上传文件,方式为post ...

使用ajaxfileupload.js实现文件上传

第四步、java代码

使用ajaxfileupload.js实现文件上传相关推荐

最新文章

热门文章