jsp中js上传组件的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/huajun_liweizhi/article/details/83678708

本文介绍如何利用jQuery.Uploadify插件实现网页文件上传功能。文中提供了完整的HTML结构及JavaScript配置示例，并展示了如何设置上传按钮、上传地址等参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在页面中写如下代码

     <div class="mainContainer">
<div class="mainInfo" style="display:none" id="mainInfo">
<br/>
         
  添加附件：
  <input type="file" name="uploadify" id="uploadify" value="aaaaaaaa"/>

  <div id="fileQueue"></div>
  <br/><br/><br/>
  <p>
          <a href="javascript:;" onClick="javascript:uploadifyUpload()">开始上传</a> 
          <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("文件上传失败");
  }
});