jquery-file-upload附件上传

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery-file-upload附件上传相关的知识，希望对你有一定的参考价值。

引入样式和js文件

    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"/>  
    <link rel="stylesheet" href="css/jquery.fileupload.css">  
    <link rel="stylesheet" href="css/jquery.fileupload-ui.css">   
    <script src="js/jquery.js"></script> 
    <script src="js/jquery.ui.widget.js"></script>  
    <script src="js/jquery.fileupload.js"></script>

html

<body>
  <div class="row fileupload-buttonbar" style="padding-left:15px;">  
    <div class="thumbnail col-sm-6">  
      <img id="weixin_show" style="height:180px;margin-top:10px;margin-bottom:8px;"  src="__PUBLIC__/images/game/game_1.png" data-holder-rendered="true">  
      <div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0">
        <div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div>
      </div>  
      <div class="caption" align="center">  
        <span id="weixin_upload" class="btn btn-primary fileinput-button">  
        <span>上传</span>  
        <input type="file" id="weixin_image" name="files" multiple>  
        </span>  
        <a id="weixin_cancle" href="javascript:void(0)" class="btn btn-warning" role="button" onclick="cancleUpload(‘weixin‘)" style="display:none">删除</a>
      </div>  
    </div>  
  </div> 
</body>

上传ajax:

    <script type="text/javascript">
      $(function() {  
          $("#weixin_image").fileupload({  
                  url: ‘http://www.test007.com/ser/api/json/file/upload/batch‘,  
                  sequentialUploads: true  
              }).bind(‘fileuploadprogress‘, function (e, data) {  //主要是进度条的修改
                  var progress = parseInt(data.loaded / data.total * 100, 10);  
                  $("#weixin_progress").css(‘width‘,progress + ‘%‘);  
                  $("#weixin_progress").html(progress + ‘%‘);  
              }).bind(‘fileuploaddone‘, function (e, data) {  //上传结束后执行的操作
                  var imgurl = JSON.parse(data.result).data;
                  $("#weixin_show").attr("src", imgurl);  
                  $("#weixin_upload").css({display:"none"});  
                  $("#weixin_cancle").css({display:""});  
              });  
                   
          });

    </script>

 

以上是关于jquery-file-upload附件上传的主要内容，如果未能解决你的问题，请参考以下文章

批量上传图片(jQuery-File-Upload使用)

SpringSpring MVC文件上传--整合bootstrap-fileinput和jQuery-File-Upload

blueimp jQuery-File-Upload 上传图片后不显示缩略图

进度回调总是在jquery-file-upload插件中显示100％上传

JQuery-File-Upload BlueImp文件上传EXIF方向旋转

ie8实现ajax无刷新文件上传