jsp中js上传组件的使用

1  首先把jquery.uploadify插件引入页面

 

在页面中写如下代码

 

     <div class="mainContainer">
 <div class="mainInfo" style="display:none" id="mainInfo">
 <br/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  添加附件：
  <input type="file" name="uploadify" id="uploadify" value="aaaaaaaa"/>  
  
  <div id="fileQueue"></div>
  <br/><br/><br/>
  <p>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onClick="javascript:uploadifyUpload()">开始上传</a>&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
  </p>
  <p>
   
  </p>
  <ol class=files></ol>
  </div>
 </div>

 

处理js代码如下有部分多余

 

//用于文件上传
 function uploadifyUpload(){
  
  var url = "friends";
  $('#uploadify').uploadifySettings('scriptData', {'category' : url});
  $('#uploadify').uploadifyUpload();
   
} 
//用于文件上传
$(document).ready(function() {

   $(':radio:eq(1)').click(function(){

    $("#mainInfo").show();
   });
   
//   据说这个效率高
//   if($(':radio').is(':checked')){
//       if($(this).attr()==a){
//          //dosth
//        }
//    }
//   
    $(':radio:eq(0)').click(function(){

    $("#mainInfo").hide();
   });

 $("#uploadify").uploadify({
     'uploader'       : 'resources/uploadify.swf',
     'script'         : 'chuli.jsp',
     'cancelImg'      : 'resources/cancel.png',
     'queueID'        : 'fileQueue',
     'auto'           : false,
     'multi'          : false,
     'buttonText'     : 'Browse file',
                
     onComplete: function (evt, queueID, fileObj, response, data) {
   $('<li></li>').appendTo('.files').text(response);
   
  },
  onError: function(a, b, c, d) {
          alert("文件上传失败");
  }
 });

 

还有一个处理的servlet 这里我用jsp代替了 因为 当时用servle的时候出错了 所以直接代替了

 

需要的js上传工具与具体实例代码都在rar里呢 下载好好看看吧