引入样式和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>