## 移動端文件上傳 引入腳本及樣式文件 ~~~ <script src="/static/libs/jquery/jquery.min.js"></script> <link rel="stylesheet" href="/static/libs/jQueryFileUpload/css/jquery.fileupload.css"> <script src="/static/libs/jQueryFileUpload/js/vendor/jquery.ui.widget.js"></script> <script src="/static/libs/jQueryFileUpload/js/jquery.iframe-transport.js"></script> <script src="/static/libs/jQueryFileUpload/js/jquery.fileupload.js"></script> ~~~ html代碼 ~~~ <form id="form"> <span>上傳照片:</span> <ul class="mui-table-view imgs"> <li class="first"> <span class="btn btn-success fileinput-button"> <img src="/mobile/images/insert_img.png"> <input id="fileupload" type="file" name="file" multiple> </span> </li> </ul> </form> <script type="text/javascript"> $(function () { 'use strict'; var url = '/common/picture/upload'; $('#fileupload').fileupload({ url: url, dataType: 'json', done: function (e, data) { var html = "<li class=\"upimg\">\ <input type=\"hidden\" value=\""+data.result.data.id+"\" name=\"cover_ids[]\">\ <i class=\"upimg-close\"></i>\ <img src=\""+data.result.data.url+"\">\ </li>"; $('.first').before(html); $('.upimg-close').on("tap",function() { $(this).parent().remove(); }); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css( 'width', progress + '%' ); } }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled'); }); </script> ~~~