欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajaxfileupload.js实现上传文件功能

程序员文章站 2023-11-18 16:45:10
使用ajaxfileupload.js实现上传文件功能 一、ajaxfileupload是一个异步上传文件的jquery插语法:$.ajaxfileupload([opt...

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

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

options参数说明:

1、url           上传处理程序地址
2、fileelementid      文件选择框的id属性,即的id
3、secureuri        是否启用安全提交,默认为false
4、datatype        服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jquery会自动判断
5、success        服务器响应成功后的处理函数 ,参数data就是服务器返回的数据
6、error          服务器响应失败后的处理函数
7、data           自定义参数,当有数据要和上传的文件一起传到后台处理的时候会用到。这里注意,数据格式比较严格{param:[{‘param1':'value1','param2':'value2' },{‘param1':'value3','param2':'value4' }]}, 其中单引号不能改为双引号
8、type           提交数据的方式,一般为post

二、使用方法

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

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

第二步、html代码

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

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

<input type ="file" id="importpicinput" name= "myfile" style=" display: none" /> 
<div class ="input-append"> 
<label for ="importpicname"> 上传原始图片:</label > 
<input type ="text" class="input-large" id= "importpicname" /> 
<a class ="btn btn-default" onclick= "$('#importpicinput').click();" > 打开</a> 
</div > 

展现的页面效果:

第三步、js代码

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

$(document).ready(function(e) { 
  $('body').on('change',$('#importpicinput'),function(){ 
   $( "#importpicname").val($( "#importpicinput").val()); 
  }); 
}); 

上传文件的js代码:

$.ajaxfileupload({ 
 type: "post", 
 url: "/toolkit/importpicfile.do", 
 data:{picparams:text},//要传到后台的参数,没有可以不写 
 secureuri : false,//是否启用安全提交,默认为false 
 fileelementid:'importpicinput',//文件选择框的id属性 
 datatype: 'json',//服务器返回的格式 
 async : false, 
 success: function(data){ 
  if(data.result=='success'){ 
   //coding 
  }else{ 
   //coding 
  } 
 }, 
 error: function (data, status, e){ 
  /coding 
 } 
}); 

第四步、java代码

@requestmapping(value="/importpicfile.do" ,produces="text/html;charset=utf-8" ) 
 public @responsebody string importpicfile1(@requestparam("picparams") string picparams, 
@requestparam multipartfile myfile,httpservletrequest request){ 

   map<string,object> map= new hashmap<string,object>(); 
    if(myfile.isempty()){ 
     map.put( "result", "error"); 
     map.put( "msg", "上传文件不能为空" ); 
   } else{ 
     string originalfilename=myfile.getoriginalfilename(); 
     string filebasename=filenameutils.getbasename(originalfilename); 
     string flodername=filebasename+"_" +dateutil.getnowtimedata(); 
     try{ 

      string genepicpath=request.getsession().getservletcontext().getrealpath("/upload/" +flodername); 
       //把上传的图片放到服务器的文件夹下 
      fileutils. copyinputstreamtofile(myfile.getinputstream(), new file(genepicpath,originalfilename)); 
       //coding 
      map.put( "result", "success"); 

     } catch (exception e) { 
      map.put( "result", "error"); 
      map.put( "msg",e.getmessage()); 

     } 
   } 
   string result=string. valueof(jsonobject.fromobject (map)); 
    return result; 
  } 

三、注意点

(1)上文html中控件的css样式,都是用的bootstrap框架里的基本样式,也可以不用使用bootstrap框架,仅做参考。
(2)之前用的live方法,前台js报错说找不到这个方法,后来查了资料才发现,1.9以上的jquery版本已经废弃live这个方法了

$(document).ready(function(e) { 
 $('#importpicinput ').live( 'change', function(){ 

  }) 
}); 

(3)文件选择框必须要有name,即,且java代码中的变量要跟name的值保持一致,即@requestparam multipartfile myfile,这点非常的重要。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。