• 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="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>
  • 相关阅读:
    记录一次win10最大的bug
    Spring事务处理知识点
    ubuntu系统上安装docker
    Java抽象方法、接口、访问修饰符、访问权限笔记
    java牛客刷题2020年10月2日
    牛客错题2020年9月30日
    牛客错题2020年9月29日
    牛客刷题2020年9月27日
    java牛客刷题2020年9月21日
    java牛客刷题2020年9月20日
  • 原文地址:https://www.cnblogs.com/007sx/p/6160773.html
Copyright © 2020-2023  润新知