,,ajaxfileupload.js实现上传文件功能

,,ajaxfileupload.js实现上传文件功能

这篇文章主要为大家详细介绍了ajaxfileupload.js实现上传文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

使用ajaxfileupload.js实现上传文件功能

一、ajaxFileUpload是一个异步上传文件的jQuery插语法:$.ajaxFileUpload([options])

选择参数说明:

1、网址上传处理程序地址

2、fileElementId文件选择框的身份证明(识别)属性,即的身份证明(识别)

3、安全是否启用安全提交,默认为错误的

4、数据类型服务器返回的数据类型。可以为xml,脚本,json,html。如果不填写,jQuery会自动判断

5、成功服务器响应成功后的处理函数,参数数据就是服务器返回的数据

6、误差服务器响应失败后的处理函数

7、数据自定义参数,当有数据要和上传的文件一起传到后台处理的时候会用到。这里注意,数据格式比较严格{param:[{'param1 ':'值1 ',' param2 ':'值2' },{'param1 ':'值3 ',' param2 ':'值4' }]},其中单引号不能改为双引号

8、类型提交数据的方式,一般为邮政

二、使用方法

第一步、先引入jquery和ajaxFileUpload插件,注意先后顺序:

脚本类型=' text/JavaScript ' src=' js/jquery-1。10 .2 .量滴js '/脚本

脚本类型=' text/JavaScript ' src=' js/Ajax文件上传。js '/脚本

第二步、html代码

原始的,控件展示效果如下:

因为原始控件的样式无法改变,所以我们一般会让这个标签隐藏,然后点击别的标签来触发上传控件。

input type=' file ' id=' ImportPicInput ' name=' my file ' style=' display:none '/

div class='输入-追加'

='importPicName '的标签上传原始图片:/标签

input type=' text ' class=' input-large ' id=' importPicName '/

a class=' BTN BTN-默认' onclick=' $(' # ImportPicInput ').单击();'打开/a

/div

展现的页面效果:

第三步、js代码

在用户选择完上传图片后,需要把图片名称显示到输入框中,还需要在射流研究…文件中加入代码:

$(文档)。就绪(功能(e) {

$('body ').on('change ',$('#ImportPicInput '),function(){

$( '#importPicName ').val($( '#ImportPicInput ').val());

});

});

上传文件的射流研究…代码:

$.ajaxFileUpload({

类型:' POST ',

URL:"/toolkit/importpicfile。做”,

数据:{picParams:text},//要传到后台的参数,没有可以不写

secureuri : false,//是否启用安全提交,默认为错误的

fileElementId:'ImportPicInput ',//文件选择框的身份证明(识别)属性

数据类型:' json ',//服务器返回的格式

异步:假,

成功:函数(数据){

if(data.result=='success'){

//编码

}否则{

//编码

}

},

错误:函数(数据,状态,e){

/编码

}

});

第四步、java代码

@请求映射(value='/importpicfile。do ',products=' text/html;charset=utf-8 ')

public @ response正文字符串importpicfile 1(@ request param(' pic params ')字符串pic params,

@ request param multipart file my file,HttpServletRequest请求){

MapString,Object map=new HashMapString,Object();

if(myfile.isEmpty()){

map.put('结果','错误');

map.put( 'msg ','上传文件不能为空' );

}否则{

字符串原始文件名=我的文件。get original filename();

字符串文件basename=文件名utils。getbasename(原始文件名);

string floder name=file basename ' _ ' date util。getnowtimedata();

尝试{

字符串genePicPath=request。getsession().getServletContext().获取真实路径('/upload/' floder name);

//把上传的图片放到服务器的文件夹下

FileUtils .copinputstreamtofile(我的文件。getinputstream(),新文件(genePicPath,原始文件名));

//编码

map.put('结果','成功');

} catch(异常e) {

map.put('结果','错误');

map.put( 'msg ',e . getmessage());

}

}

字符串结果=字符串(JSON对象的. value。来自对象(地图));

返回结果;

}

三、注意点

(1)上文超文本标记语言中控件的钢性铸铁样式,都是用的引导程序框架里的基本样式,也可以不用使用引导程序框架,仅做参考。

(2)之前用的直播方式,前台js报错找不到。后来查了一下资料,发现在jquery 1.9以上版本已经放弃了live方法。

$(文档)。就绪(功能(e) {

$('#ImportPicInput ')。live( 'change ',function(){

})

});

(3)文件选择框必须有name,也就是java代码中的变量要和name的值一致,也就是@ request param multipart file my file,这个很重要。

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令
  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令,使用JS实现简单的图片切换功能
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法,使用js实现数据格式化
  • js选择日期,js日期选择控件,JS实现时间选择器
  • js轮播图视频教程,html5幻灯片图片轮播,js实现幻灯片轮播图
  • js轮播图菜鸟教程,js实现轮播图原理及示例
  • js轮播图菜鸟教程,js实现轮播图原理及示例,JS实现轮播图效果的3种简单方法
  • js获取dom节点的方法,js移除dom元素,JS实现DOM删除节点操作示例
  • js自动复制,网页一键复制,JS实现一键复制
  • js自动切换图片效果,js实现图片切换效果怎么做
  • js用数组实现图片切换,js中图片切换效果怎么实现,js实现图片数组中图片切换效果
  • js星空特效,js流星雨特效,js实现星星闪特效
  • js日期加减算天数,js实现日期按月份加减
  • js日期加减算天数,js实现日期按月份加减,js中日期的加减法
  • 留言与评论(共有 条评论)
       
    验证码: