jquery的三种ajax上传组件

最近选择上传组件，顺便总结一下这三个上传组件

1.ajaxFileUpload

网址：http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

适合当个文件的上传，多个文件的话，需要多个文件输入框

引入：jquery-1.9.1.js

ajaxfileupload.js

js部分：

function fileupload(){
   if($("#filePath").val()==""){
    alert_message("上传文件不能为空!");
    return false;
   }

  var txtImg_url=$("#filePath").val().toLowerCase();

  var txtImg_ext=txtImg_url.substring(txtImg_url.length-3,txtImg_url.length);

  if (txtImg_ext!="png" && txtImg_ext!="gif" ){

    alert_message("请选择png或gif格式的文件!");

    $("#filePath").select();

    $("#filePath").focus();

    return false;

  }

  var imagefile = document.getElementById("filePath").files[0];

  var size = imagefile.size/1024.0;

  if (size > 300){

      oms_message("图片大小不超过300K!");

      return false;

  }

   $.ajaxFileUpload({
     url:"sys/function/upload",//需要链接到服务器地址
     secureuri:false,
     fileElementId:"filePath",//文件选择框的id属性
     dataType: 'text/xml',   //也可以是json
     success: function (data) {
      alert_message("上传成功");
      $('#myId').val(data);
     },
     error: function (data, status, e){
      alert(e);
     }
    }
   );
   return false;
  }

html部分：

<input name="imageurl" type="hidden" id="myId"/>

<input type="file" class="validate[required] text-input"  name="filePath" id="filePath"/>
<input type="button" class="submit" name="fileLoad" id="fileLoad" value="上传" onClick="fileupload()"/>

Java代码部分：

@RequestMapping(value="/sys/function/upload",produces="text/plain;charset=UTF-8")
 @ResponseBody
 public String ajaxUpload(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException{
  MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
  String fileName = "";
  @SuppressWarnings("deprecation")
  String path = request.getRealPath("/");
  String realPath = "";
  for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) { 
         String key = (String) it.next(); 
         MultipartFile imgFile = multipartRequest.getFile(key); 
         fileName = imgFile.getOriginalFilename();
         File file = new File(path+fileName);
         imgFile.transferTo(file);
         realPath = path + fileName;
  }
  return realPath;
 }

 

2.uploadify

网址：http://www.uploadify.com/

demo:http://www.uploadify.com/demos/

引入：jquery-1.9.1.js、uploadify.css、jquery.uploadify.min.js

uploadify-flash版本：v2.2

 

js部分：

$('#fileInput').uploadify({
    'swf'      : 'js/uploadify/uploadify.swf',
   'uploader' : 'sys/function/upload;jsessionid='+$('#sessionId').val(),
   'buttonText' : '浏览...',
   'uploadLimit' : 5,
    'auto':false,
    queueSizeLimit:1,
    'progressData' : 'percentage'
     });

html部分：

//加session是因为在firefox和chrome下上传失败，网上说是由于session失效导致，IE下没有问题

<input id="sessionId" type="text" value="${pageContext.session.id}"/>

<div>
 <input type="file" name="fileInput" id="fileInput" />
 <a href="javascript:$('#fileInput').uploadify('upload','*')">开始上传</a>
 </div>

 

Java部分同上

 

3.jquery.MultiFile

jquery.MultiFile网址：http://www.fyneworks.com/jquery/multiple-file-upload/

jqueryform网址：http://jquery.malsup.com/form/#file-upload

引入:jquery-1.9.1.js、jquery.form.js、jquery.MultiFile.js

结合jqueryform实现ajax多文件上传

 

css部分：

<style>

.progress { position:relative; width:200px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
#funDetail td,#funDetail tr{ padding:4px; border:#333 1px solid; border-collapse:collapse; cellspacing:0px; }
.MultiFile-label{ position:absolute; top:75px; left:296px;}
</style>

js部分：

$('#uploadAdd').click(function(){
   if ($('#filePath_wrap_list').html() == ""){
     alert_message("请先上传文件再提交!");
     return false;
     }else {
      $('#addUploadForm').submit();
     }
  });

$('#filePath').MultiFile({
      accept:'gif|jpeg|png|jpg',
      max:1,
      STRING: {
       remove:'移除',
       selected:'已经选择了: $file',
       denied:'不能选择： $ext!',
       duplicate:'文件重复:\n$file!'
      },
      autoIntercept:['ajaxForm']
  });

 

var bar = $('.bar');
   var percent = $('.percent');
   var status = $('#status');
   $('#addUploadForm').ajaxForm({
       beforeSend: function() {
           status.empty();
           var percentVal = '0%';
           bar.width(percentVal);
           percent.html(percentVal);
       },
       uploadProgress: function(event, position, total, percentComplete) {
           var percentVal = percentComplete + '%';
           bar.width(percentVal);
           percent.html(percentVal);
       },
       success: function(data) {
           var percentVal = '100%';
           bar.width(percentVal);
           percent.html(percentVal);
           $('#myId').val(data.msg);
           $('input:file').MultiFile('reset');
       },
    complete: function(xhr) {

    },
    url:'sys/function/upload',
    type:'post',
    dataType:'json'
   });

 

 

html部分：

<form id="addUploadForm" method="post" ENCTYPE="multipart/form-data">
     <ul>
  <li><label style="display:inline; float:left; height:30px; line-height:30px; width:90px; margin-left:70px;">图片路径：</label><input  name="filePath" type="file" class="text-input" id="filePath" style="display:inline; padding-left:0px; margin-left:0px; float:left; clear:right; height:24px; padding-right:0px; margin-right:0px; width:280px;" size="27"/>
  </li>
  <li><input id="uploadAdd" class="submit" type="submit" value="上传" style="padding-left:0px; margin-left:0px; height:24px;"/></li>
  <li>
      <div class="progress" style="float:left; margin-top:14px; margin-left:160px; clear:both; width:264px;">
         <div class="bar"></div >
         <div class="percent">0%</div >
      </div>
      <div id="status"></div>
     </li>
        </ul>
 </form>

 

java部分：

基本同上，但是文件名是返回json格式