Javascript文件上传插件

周五發表於 2019-10-11 14:28:00

<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body ">
<p> </p>
<p><strong>jQuery File Uploader</strong></p>
<p><img src="https://images0.cnblogs.com/blog/36987/201309/21102704-e42a9af7af864866af1987bb57dd77b2.jpg"></p>
<p>这是最受欢迎的 <strong>jQuery</strong> 文件上传组件，支持批量上传，拖放上传，显示上传进度条以及校验功能。</p>
<p>支持预览图片、音频和视频，支持跨域上传和客户端图片缩放，支持的服务端平台有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。</p>
<p>使用示例：</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_276920" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain">$(</code><code class="javascript keyword">function</code> <code class="javascript plain">() {</code></div>
<div class="line number2 index1 alt1"><code class="javascript spaces">    </code><code class="javascript string">'use strict'</code><code class="javascript plain">;</code></div>
<div class="line number3 index2 alt2"><code class="javascript spaces">    </code><code class="javascript comments">// Change this to the location of your server-side upload handler:</code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces">    </code><code class="javascript keyword">var</code> <code class="javascript plain">url = window.location.hostname === </code><code class="javascript string">'blueimp.github.io'</code> <code class="javascript plain">?</code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces">                </code><code class="javascript string">'//jquery-file-upload.appspot.com/'</code> <code class="javascript plain">: </code><code class="javascript string">'server/php/'</code><code class="javascript plain">;</code></div>
<div class="line number6 index5 alt1"><code class="javascript spaces">    </code><code class="javascript plain">$(</code><code class="javascript string">'#fileupload'</code><code class="javascript plain">).fileupload({</code></div>
<div class="line number7 index6 alt2"><code class="javascript spaces">        </code><code class="javascript plain">url: url,</code></div>
<div class="line number8 index7 alt1"><code class="javascript spaces">        </code><code class="javascript plain">dataType: </code><code class="javascript string">'json'</code><code class="javascript plain">,</code></div>
<div class="line number9 index8 alt2"><code class="javascript spaces">        </code><code class="javascript plain">done: </code><code class="javascript keyword">function</code> <code class="javascript plain">(e, data) {</code></div>
<div class="line number10 index9 alt1"><code class="javascript spaces">            </code><code class="javascript plain">$.each(data.result.files, </code><code class="javascript keyword">function</code> <code class="javascript plain">(index, file) {</code></div>
<div class="line number11 index10 alt2"><code class="javascript spaces">                </code><code class="javascript plain">$(</code><code class="javascript string">'<p/>'</code><code class="javascript plain">).text(file.name).appendTo(</code><code class="javascript string">'#files'</code><code class="javascript plain">);</code></div>
<div class="line number12 index11 alt1"><code class="javascript spaces">            </code><code class="javascript plain">});</code></div>
<div class="line number13 index12 alt2"><code class="javascript spaces">        </code><code class="javascript plain">},</code></div>
<div class="line number14 index13 alt1"><code class="javascript spaces">        </code><code class="javascript plain">progressall: </code><code class="javascript keyword">function</code> <code class="javascript plain">(e, data) {</code></div>
<div class="line number15 index14 alt2"><code class="javascript spaces">            </code><code class="javascript keyword">var</code> <code class="javascript plain">progress = parseInt(data.loaded / data.total * 100, 10);</code></div>
<div class="line number16 index15 alt1"><code class="javascript spaces">            </code><code class="javascript plain">$(</code><code class="javascript string">'#progress .progress-bar'</code><code class="javascript plain">).css(</code></div>
<div class="line number17 index16 alt2"><code class="javascript spaces">                </code><code class="javascript string">'width'</code><code class="javascript plain">,</code></div>
<div class="line number18 index17 alt1"><code class="javascript spaces">                </code><code class="javascript plain">progress + </code><code class="javascript string">'%'</code></div>
<div class="line number19 index18 alt2"><code class="javascript spaces">            </code><code class="javascript plain">);</code></div>
<div class="line number20 index19 alt1"><code class="javascript spaces">        </code><code class="javascript plain">}</code></div>
<div class="line number21 index20 alt2"><code class="javascript spaces">    </code><code class="javascript plain">}).prop(</code><code class="javascript string">'disabled'</code><code class="javascript plain">, !$.support.fileInput)</code></div>
<div class="line number22 index21 alt1"><code class="javascript spaces">        </code><code class="javascript plain">.parent().addClass($.support.fileInput ? undefined : </code><code class="javascript string">'disabled'</code><code class="javascript plain">);</code></div>
<div class="line number23 index22 alt2"><code class="javascript plain">});</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>插件下载      在线演示 </p>
<p> </p>
<p><strong>DropZoneJS</strong></p>
<p><img src="https://images0.cnblogs.com/blog/36987/201309/21102723-e3eb093ebd994c6e86972e5c0a0f2b96.jpg"></p>
<p>DropzoneJS 是一个用于现代浏览器的开源的拖放上传插件，最大的特色是即时图片预览功能。</p>
<p>使用方法非常简单，只需添加 class 即可：</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_249847" class="syntaxhighlighterruby">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="ruby plain"><form id=</code><code class="ruby string">"my-awesome-dropzone"</code> <code class="ruby plain">action=</code><code class="ruby string">"/target"</code> <code class="ruby keyword">class</code><code class="ruby plain">=</code><code class="ruby string">"dropzone"</code><code class="ruby plain">></form></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>或者手动实例化：</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_509120" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript keyword">new</code> <code class="javascript plain">Dropzone(</code><code class="javascript string">"div#my-dropzone"</code><code class="javascript plain">, { </code><code class="javascript comments">/* options */</code> <code class="javascript plain">});</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>可以添加更多参数：</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_448050" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain">Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 };</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>发可以自定义事件：</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_354943" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain">Dropzone.options.myDropzone({</code></div>
<div class="line number2 index1 alt1"><code class="javascript spaces">  </code><code class="javascript plain">init: </code><code class="javascript keyword">function</code><code class="javascript plain">() {</code></div>
<div class="line number3 index2 alt2"><code class="javascript spaces">    </code><code class="javascript keyword">this</code><code class="javascript plain">.on(</code><code class="javascript string">"error"</code><code class="javascript plain">, </code><code class="javascript keyword">function</code><code class="javascript plain">(file, message) { alert(message); });</code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces">  </code><code class="javascript plain">}</code></div>
<div class="line number5 index4 alt2"><code class="javascript plain">});</code></div>
<div class="line number6 index5 alt1"><code class="javascript comments">// or if you need to access a Dropzone somewhere else:</code></div>
<div class="line number7 index6 alt2"><code class="javascript keyword">var</code> <code class="javascript plain">myDropzone = Dropzone.forElement(</code><code class="javascript string">"div#my-dropzone"</code><code class="javascript plain">);</code></div>
<div class="line number8 index7 alt1"><code class="javascript plain">myDropzone.on(</code><code class="javascript string">"error"</code><code class="javascript plain">, </code><code class="javascript keyword">function</code><code class="javascript plain">(file, message) { alert(message); });　</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>插件下载<span style="line-height: 1.5">      </span>在线演示<span style="line-height: 1.5"> </span></p>
<p> </p>
<p><strong>Uploadify</strong></p>
<p><img src="https://images0.cnblogs.com/blog/36987/201309/21102753-19e2f158714647488e5b589543328953.jpg"></p>
<p>Uploadify 有两个版本，<strong>HTML5</strong> 方法上传版本和传统的 Flash 上传。支持高度自定义，可以完美的继承到你的网站中。</p>
<p>Flash 版本兼容性好，使用示例：</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_859069" class="syntaxhighlighterjavascript">
<div class="toolbar"><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="javascript plain">$(</code><code class="javascript keyword">function</code><code class="javascript plain">() {</code></div>
<div class="line number2 index1 alt1"><code class="javascript spaces">    </code><code class="javascript plain">$(</code><code class="javascript string">"#file_upload_1"</code><code class="javascript plain">).uploadify({</code></div>
<div class="line number3 index2 alt2"><code class="javascript spaces">        </code><code class="javascript plain">height        : 30,</code></div>
<div class="line number4 index3 alt1"><code class="javascript spaces">        </code><code class="javascript plain">swf           : </code><code class="javascript string">'/uploadify/uploadify.swf'</code><code class="javascript plain">,</code></div>
<div class="line number5 index4 alt2"><code class="javascript spaces">        </code><code class="javascript plain">uploader      : </code><code class="javascript string">'/uploadify/uploadify.php'</code><code class="javascript plain">,</code></div>
<div class="line number6 index5 alt1"><code class="javascript spaces">        </code><code class="javascript plain">width         : 120</code></div>
<div class="line number7 index6 alt2"><code class="javascript spaces">    </code><code class="javascript plain">});</code></div>
<div class="line number8 index7 alt1"><code class="javascript plain">});</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>插件下载<span>      </span>在线演示</p>
<p> </p>
<p><strong>FineUploader</strong></p>
<p><img src="https://images0.cnblogs.com/blog/36987/201309/21102639-a39e289967144264b417930154685908.jpg"></p>
<p>这个 <strong>JavaScript</strong> 插件可以帮助你在网站中集成体验极好的文件上传功能。可以结合 <strong>jQuery</strong> 或者 Bootstrap 使用。</p>
<p>主要特色：</p>
<ul class="features">
<li>批量上传</li>
<li>显示进度条</li>
<li>拖放上传</li>
<li>自动或者手动上传，可取消</li>
<li>自定义错误提示信息</li>
<li>自动或者手动重试</li>
<li>内置的校验规则</li>
<li>可编辑文件名称</li>
</ul>
<p>使用示例：</p>
<p>（1）手动触发上传</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_552851" class="syntaxhighlighter collapsedruby">
<div class="toolbar"><span>+ View Code</span><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="ruby plain"><div id=</code><code class="ruby string">"manual-fine-uploader"</code><code class="ruby plain">></div></code></div>
<div class="line number2 index1 alt1"><code class="ruby plain"><div id=</code><code class="ruby string">"triggerUpload"</code> <code class="ruby keyword">class</code><code class="ruby plain">=</code><code class="ruby string">"btn btn-primary"</code> <code class="ruby plain">style=</code><code class="ruby string">"margin-top: 10px;"</code><code class="ruby plain">></code></div>
<div class="line number3 index2 alt2"><code class="ruby spaces">  </code><code class="ruby plain"><i </code><code class="ruby keyword">class</code><code class="ruby plain">=</code><code class="ruby string">"icon-upload icon-white"</code><code class="ruby plain">></i> Upload now</code></div>
<div class="line number4 index3 alt1"><code class="ruby plain"></div></code></div>
<div class="line number5 index4 alt2"> </div>
<div class="line number6 index5 alt1"><code class="ruby plain"><script src=</code><code class="ruby string">"http://code.jquery.com/jquery-latest.js"</code><code class="ruby plain">></script></code></div>
<div class="line number7 index6 alt2"><code class="ruby plain"><script src=</code><code class="ruby string">"jquery.fineuploader-{VERSION}.js"</code><code class="ruby plain">></script></code></div>
<div class="line number8 index7 alt1"><code class="ruby plain"><script></code></div>
<div class="line number9 index8 alt2"><code class="ruby spaces">  </code><code class="ruby plain">$(document).ready(function() {</code></div>
<div class="line number10 index9 alt1"><code class="ruby spaces">    </code><code class="ruby plain">var manualuploader = $(</code><code class="ruby string">'#manual-fine-uploader'</code><code class="ruby plain">).fineUploader({</code></div>
<div class="line number11 index10 alt2"><code class="ruby spaces">      </code><code class="ruby plain">request: {</code></div>
<div class="line number12 index11 alt1"><code class="ruby spaces">        </code><code class="ruby plain">endpoint: </code><code class="ruby string">'server/handleUploads'</code></div>
<div class="line number13 index12 alt2"><code class="ruby spaces">      </code><code class="ruby plain">},</code></div>
<div class="line number14 index13 alt1"><code class="ruby spaces">      </code><code class="ruby plain">autoUpload: </code><code class="ruby keyword">false</code><code class="ruby plain">,</code></div>
<div class="line number15 index14 alt2"><code class="ruby spaces">      </code><code class="ruby plain">text: {</code></div>
<div class="line number16 index15 alt1"><code class="ruby spaces">        </code><code class="ruby plain">uploadButton: </code><code class="ruby string">'<i class="icon-plus icon-white"></i> Select Files'</code></div>
<div class="line number17 index16 alt2"><code class="ruby spaces">      </code><code class="ruby plain">}</code></div>
<div class="line number18 index17 alt1"><code class="ruby spaces">    </code><code class="ruby plain">});</code></div>
<div class="line number19 index18 alt2"> </div>
<div class="line number20 index19 alt1"><code class="ruby spaces">    </code><code class="ruby plain">$(</code><code class="ruby string">'#triggerUpload'</code><code class="ruby plain">).click(function() {</code></div>
<div class="line number21 index20 alt2"><code class="ruby spaces">      </code><code class="ruby plain">manualuploader.fineUploader(</code><code class="ruby string">'uploadStoredFiles'</code><code class="ruby plain">);</code></div>
<div class="line number22 index21 alt1"><code class="ruby spaces">    </code><code class="ruby plain">});</code></div>
<div class="line number23 index22 alt2"><code class="ruby spaces">  </code><code class="ruby plain">});</code></div>
<div class="line number24 index23 alt1"><code class="ruby plain"></script></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>（2）编辑文件名称</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_877494" class="syntaxhighlighter collapsedruby">
<div class="toolbar"><span>+ View Code</span><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
<div class="line number26 index25 alt1">26</div>
<div class="line number27 index26 alt2">27</div>
<div class="line number28 index27 alt1">28</div>
<div class="line number29 index28 alt2">29</div>
<div class="line number30 index29 alt1">30</div>
<div class="line number31 index30 alt2">31</div>
<div class="line number32 index31 alt1">32</div>
<div class="line number33 index32 alt2">33</div>
<div class="line number34 index33 alt1">34</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="ruby plain"><!</code><code class="ruby constants">DOCTYPE</code> <code class="ruby plain">html></code></div>
<div class="line number2 index1 alt1"><code class="ruby plain"><html></code></div>
<div class="line number3 index2 alt2"><code class="ruby spaces">  </code><code class="ruby plain"><head></code></div>
<div class="line number4 index3 alt1"><code class="ruby spaces">    </code><code class="ruby plain"><meta charset=</code><code class="ruby string">"utf-8"</code><code class="ruby plain">></code></div>
<div class="line number5 index4 alt2"><code class="ruby spaces">    </code><code class="ruby plain"><title>Fine Uploader - jQuery Wrapper Minimal Demo</title></code></div>
<div class="line number6 index5 alt1"><code class="ruby spaces">    </code><code class="ruby plain"><link href=</code><code class="ruby string">"fineuploader-{VERSION}.css"</code> <code class="ruby plain">rel=</code><code class="ruby string">"stylesheet"</code><code class="ruby plain">></code></div>
<div class="line number7 index6 alt2"><code class="ruby spaces">  </code><code class="ruby plain"></head></code></div>
<div class="line number8 index7 alt1"><code class="ruby spaces">  </code><code class="ruby plain"><body></code></div>
<div class="line number9 index8 alt2"><code class="ruby spaces">    </code><code class="ruby plain"><div id=</code><code class="ruby string">"jquery-wrapped-fine-uploader"</code><code class="ruby plain">></div></code></div>
<div class="line number10 index9 alt1"> </div>
<div class="line number11 index10 alt2"><code class="ruby spaces">    </code><code class="ruby plain"><div id=</code><code class="ruby string">"triggerUpload"</code> <code class="ruby keyword">class</code><code class="ruby plain">=</code><code class="ruby string">"btn btn-primary"</code> <code class="ruby plain">style=</code><code class="ruby string">"margin-top: 10px;"</code><code class="ruby plain">></code></div>
<div class="line number12 index11 alt1"><code class="ruby spaces">        </code><code class="ruby plain"><i </code><code class="ruby keyword">class</code><code class="ruby plain">=</code><code class="ruby string">"icon-upload icon-white"</code><code class="ruby plain">></i> Upload now</code></div>
<div class="line number13 index12 alt2"><code class="ruby spaces">    </code><code class="ruby plain"></div></code></div>
<div class="line number14 index13 alt1"> </div>
<div class="line number15 index14 alt2"><code class="ruby spaces">    </code><code class="ruby plain"><script src=</code><code class="ruby string">"http://code.jquery.com/jquery-latest.js"</code><code class="ruby plain">></script></code></div>
<div class="line number16 index15 alt1"><code class="ruby spaces">    </code><code class="ruby plain"><script src=</code><code class="ruby string">"jquery.fineuploader-{VERSION}.js"</code><code class="ruby plain">></script></code></div>
<div class="line number17 index16 alt2"><code class="ruby spaces">    </code><code class="ruby plain"><script></code></div>
<div class="line number18 index17 alt1"><code class="ruby spaces">      </code><code class="ruby plain">$(document).ready(function () {</code></div>
<div class="line number19 index18 alt2"><code class="ruby spaces">        </code><code class="ruby plain">$(</code><code class="ruby string">'#myFineUploader'</code><code class="ruby plain">).fineUploader({</code></div>
<div class="line number20 index19 alt1"><code class="ruby spaces">            </code><code class="ruby plain">request: {</code></div>
<div class="line number21 index20 alt2"><code class="ruby spaces">                </code><code class="ruby plain">endpoint: </code><code class="ruby string">'server/handleUploads'</code></div>
<div class="line number22 index21 alt1"><code class="ruby spaces">            </code><code class="ruby plain">},</code></div>
<div class="line number23 index22 alt2"><code class="ruby spaces">            </code><code class="ruby plain">editFilename: {</code></div>
<div class="line number24 index23 alt1"><code class="ruby spaces">                </code><code class="ruby plain">enabled: </code><code class="ruby keyword">true</code></div>
<div class="line number25 index24 alt2"><code class="ruby spaces">            </code><code class="ruby plain">},</code></div>
<div class="line number26 index25 alt1"><code class="ruby spaces">            </code><code class="ruby plain">autoUpload: </code><code class="ruby keyword">false</code></div>
<div class="line number27 index26 alt2"><code class="ruby spaces">        </code><code class="ruby plain">});</code></div>
<div class="line number28 index27 alt1"> </div>
<div class="line number29 index28 alt2"><code class="ruby spaces">        </code><code class="ruby plain">$(</code><code class="ruby string">'#triggerUpload'</code><code class="ruby plain">).click(function() {</code></div>
<div class="line number30 index29 alt1"><code class="ruby spaces">            </code><code class="ruby plain">$(</code><code class="ruby string">'#myFineuploader'</code><code class="ruby plain">).fineUploader(</code><code class="ruby string">'uploadStoredFiles'</code><code class="ruby plain">);</code></div>
<div class="line number31 index30 alt2"><code class="ruby spaces">        </code><code class="ruby plain">});</code></div>
<div class="line number32 index31 alt1"><code class="ruby spaces">    </code><code class="ruby plain"></script></code></div>
<div class="line number33 index32 alt2"><code class="ruby spaces">  </code><code class="ruby plain"></body></code></div>
<div class="line number34 index33 alt1"><code class="ruby plain"></html></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>（3）自定义选项</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_877039" class="syntaxhighlighter collapsedruby">
<div class="toolbar"><span>+ View Code</span><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
<div class="line number24 index23 alt1">24</div>
<div class="line number25 index24 alt2">25</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="ruby plain"><div id=</code><code class="ruby string">"restricted-fine-uploader"</code><code class="ruby plain">></div></code></div>
<div class="line number2 index1 alt1"> </div>
<div class="line number3 index2 alt2"><code class="ruby plain"><script src=</code><code class="ruby string">"http://code.jquery.com/jquery-latest.js"</code><code class="ruby plain">></script></code></div>
<div class="line number4 index3 alt1"><code class="ruby plain"><script src=</code><code class="ruby string">"jquery.fineuploader-{VERSION}.js"</code><code class="ruby plain">></script></code></div>
<div class="line number5 index4 alt2"><code class="ruby plain"><script></code></div>
<div class="line number6 index5 alt1"><code class="ruby spaces">  </code><code class="ruby plain">$(document).ready(function() {</code></div>
<div class="line number7 index6 alt2"><code class="ruby spaces">    </code><code class="ruby plain">$(</code><code class="ruby string">'#restricted-fine-uploader'</code><code class="ruby plain">).fineUploader({</code></div>
<div class="line number8 index7 alt1"><code class="ruby spaces">      </code><code class="ruby plain">request: {</code></div>
<div class="line number9 index8 alt2"><code class="ruby spaces">        </code><code class="ruby plain">endpoint: </code><code class="ruby string">'server/success.html'</code></div>
<div class="line number10 index9 alt1"><code class="ruby spaces">      </code><code class="ruby plain">},</code></div>
<div class="line number11 index10 alt2"><code class="ruby spaces">      </code><code class="ruby plain">multiple: </code><code class="ruby keyword">false</code><code class="ruby plain">,</code></div>
<div class="line number12 index11 alt1"><code class="ruby spaces">      </code><code class="ruby plain">validation: {</code></div>
<div class="line number13 index12 alt2"><code class="ruby spaces">        </code><code class="ruby plain">allowedExtensions: [</code><code class="ruby string">'jpeg'</code><code class="ruby plain">, </code><code class="ruby string">'jpg'</code><code class="ruby plain">, </code><code class="ruby string">'txt'</code><code class="ruby plain">],</code></div>
<div class="line number14 index13 alt1"><code class="ruby spaces">        </code><code class="ruby plain">sizeLimit: </code><code class="ruby constants">51200</code> <code class="ruby plain">// </code><code class="ruby constants">50</code> <code class="ruby plain">kB = </code><code class="ruby constants">50</code> <code class="ruby plain">* </code><code class="ruby constants">1024</code> <code class="ruby plain">bytes</code></div>
<div class="line number15 index14 alt2"><code class="ruby spaces">      </code><code class="ruby plain">},</code></div>
<div class="line number16 index15 alt1"><code class="ruby spaces">      </code><code class="ruby plain">text: {</code></div>
<div class="line number17 index16 alt2"><code class="ruby spaces">        </code><code class="ruby plain">uploadButton: </code><code class="ruby string">'Click or Drop'</code></div>
<div class="line number18 index17 alt1"><code class="ruby spaces">      </code><code class="ruby plain">},</code></div>
<div class="line number19 index18 alt2"><code class="ruby spaces">      </code><code class="ruby plain">showMessage: function(message) {</code></div>
<div class="line number20 index19 alt1"><code class="ruby spaces">        </code><code class="ruby plain">// Using Bootstrap's classes</code></div>
<div class="line number21 index20 alt2"><code class="ruby spaces">        </code><code class="ruby plain">$(</code><code class="ruby string">'#restricted-fine-uploader'</code><code class="ruby plain">).append(</code><code class="ruby string">'<div class="alert alert-error">'</code> <code class="ruby plain">+ message + </code><code class="ruby string">'</div>'</code><code class="ruby plain">);</code></div>
<div class="line number22 index21 alt1"><code class="ruby spaces">      </code><code class="ruby plain">}</code></div>
<div class="line number23 index22 alt2"><code class="ruby spaces">    </code><code class="ruby plain">});</code></div>
<div class="line number24 index23 alt1"><code class="ruby spaces">  </code><code class="ruby plain">});</code></div>
<div class="line number25 index24 alt2"><code class="ruby plain"></script></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>（4）显示图片缩略图</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_172427" class="syntaxhighlighter collapsedruby">
<div class="toolbar"><span>+ View Code</span><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
<div class="line number17 index16 alt2">17</div>
<div class="line number18 index17 alt1">18</div>
<div class="line number19 index18 alt2">19</div>
<div class="line number20 index19 alt1">20</div>
<div class="line number21 index20 alt2">21</div>
<div class="line number22 index21 alt1">22</div>
<div class="line number23 index22 alt2">23</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="ruby plain"><div id=</code><code class="ruby string">"thumbnail-fine-uploader"</code><code class="ruby plain">></div></code></div>
<div class="line number2 index1 alt1"> </div>
<div class="line number3 index2 alt2"><code class="ruby plain"><script src=</code><code class="ruby string">"http://code.jquery.com/jquery-latest.js"</code><code class="ruby plain">></script></code></div>
<div class="line number4 index3 alt1"><code class="ruby plain"><script src=</code><code class="ruby string">"jquery.fineuploader-{VERSION}.js"</code><code class="ruby plain">></script></code></div>
<div class="line number5 index4 alt2"><code class="ruby plain"><script></code></div>
<div class="line number6 index5 alt1"><code class="ruby spaces">  </code><code class="ruby plain">$(document).ready(function() {</code></div>
<div class="line number7 index6 alt2"><code class="ruby spaces">    </code><code class="ruby plain">$(</code><code class="ruby string">'#thumbnail-fine-uploader'</code><code class="ruby plain">).fineUploader({</code></div>
<div class="line number8 index7 alt1"><code class="ruby spaces">      </code><code class="ruby plain">request: {</code></div>
<div class="line number9 index8 alt2"><code class="ruby spaces">        </code><code class="ruby plain">endpoint: </code><code class="ruby string">'server/success.html'</code></div>
<div class="line number10 index9 alt1"><code class="ruby spaces">      </code><code class="ruby plain">},</code></div>
<div class="line number11 index10 alt2"><code class="ruby spaces">      </code><code class="ruby plain">validation: {</code></div>
<div class="line number12 index11 alt1"><code class="ruby spaces">        </code><code class="ruby plain">allowedExtensions: [</code><code class="ruby string">'jpeg'</code><code class="ruby plain">, </code><code class="ruby string">'jpg'</code><code class="ruby plain">, </code><code class="ruby string">'gif'</code><code class="ruby plain">, </code><code class="ruby string">'png'</code><code class="ruby plain">]</code></div>
<div class="line number13 index12 alt2"><code class="ruby spaces">      </code><code class="ruby plain">},</code></div>
<div class="line number14 index13 alt1"><code class="ruby spaces">      </code><code class="ruby plain">text: {</code></div>
<div class="line number15 index14 alt2"><code class="ruby spaces">        </code><code class="ruby plain">uploadButton: </code><code class="ruby string">'Click or Drop'</code></div>
<div class="line number16 index15 alt1"><code class="ruby spaces">      </code><code class="ruby plain">}</code></div>
<div class="line number17 index16 alt2"><code class="ruby spaces">    </code><code class="ruby plain">}).on(</code><code class="ruby string">'complete'</code><code class="ruby plain">, function(event, id, fileName, responseJSON) {</code></div>
<div class="line number18 index17 alt1"><code class="ruby spaces">      </code><code class="ruby keyword">if</code> <code class="ruby plain">(responseJSON.success) {</code></div>
<div class="line number19 index18 alt2"><code class="ruby spaces">        </code><code class="ruby plain">$(this).append(</code><code class="ruby string">'<img src="img/success.jpg" alt="'</code> <code class="ruby plain">+ fileName + </code><code class="ruby string">'">'</code><code class="ruby plain">);</code></div>
<div class="line number20 index19 alt1"><code class="ruby spaces">      </code><code class="ruby plain">}</code></div>
<div class="line number21 index20 alt2"><code class="ruby spaces">    </code><code class="ruby plain">});</code></div>
<div class="line number22 index21 alt1"><code class="ruby spaces">  </code><code class="ruby plain">});</code></div>
<div class="line number23 index22 alt2"><code class="ruby plain"></script></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>（5）限制文件上传数</p>
<div class="cnblogs_Highlighter sh-gutter">
<div>
<div id="highlighter_322633" class="syntaxhighlighter collapsedruby">
<div class="toolbar"><span>+ View Code</span><span>?</span></div>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>
<div class="line number5 index4 alt2">5</div>
<div class="line number6 index5 alt1">6</div>
<div class="line number7 index6 alt2">7</div>
<div class="line number8 index7 alt1">8</div>
<div class="line number9 index8 alt2">9</div>
<div class="line number10 index9 alt1">10</div>
<div class="line number11 index10 alt2">11</div>
<div class="line number12 index11 alt1">12</div>
<div class="line number13 index12 alt2">13</div>
<div class="line number14 index13 alt1">14</div>
<div class="line number15 index14 alt2">15</div>
<div class="line number16 index15 alt1">16</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2"><code class="ruby plain"><div id=</code><code class="ruby string">"filelimit-fine-uploader"</code><code class="ruby plain">></div></code></div>
<div class="line number2 index1 alt1"> </div>
<div class="line number3 index2 alt2"><code class="ruby plain"><script src=</code><code class="ruby string">"http://code.jquery.com/jquery-latest.js"</code><code class="ruby plain">></script></code></div>
<div class="line number4 index3 alt1"><code class="ruby plain"><script src=</code><code class="ruby string">"jquery.fineuploader-{VERSION}.js"</code><code class="ruby plain">></script></code></div>
<div class="line number5 index4 alt2"><code class="ruby plain"><script></code></div>
<div class="line number6 index5 alt1"><code class="ruby spaces">  </code><code class="ruby plain">$(document).ready(function() {</code></div>
<div class="line number7 index6 alt2"><code class="ruby spaces">    </code><code class="ruby plain">$(</code><code class="ruby string">'#filelimit-fine-uploader'</code><code class="ruby plain">).fineUploader({</code></div>
<div class="line number8 index7 alt1"><code class="ruby spaces">      </code><code class="ruby plain">request: {</code></div>
<div class="line number9 index8 alt2"><code class="ruby spaces">        </code><code class="ruby plain">endpoint: </code><code class="ruby string">'server/success.html'</code></div>
<div class="line number10 index9 alt1"><code class="ruby spaces">      </code><code class="ruby plain">},</code></div>
<div class="line number11 index10 alt2"><code class="ruby spaces">      </code><code class="ruby plain">validation: {</code></div>
<div class="line number12 index11 alt1"><code class="ruby spaces">        </code><code class="ruby plain">itemLimit: </code><code class="ruby constants">3</code></div>
<div class="line number13 index12 alt2"><code class="ruby spaces">      </code><code class="ruby plain">}</code></div>
<div class="line number14 index13 alt1"><code class="ruby spaces">    </code><code class="ruby plain">});</code></div>
<div class="line number15 index14 alt2"><code class="ruby spaces">  </code><code class="ruby plain">});</code></div>
<div class="line number16 index15 alt1"><code class="ruby plain"></script></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>插件下载      在线演示</p>
<p> </p>
</div>
<div id="blog_post_info_block"> </div>
</div><br><br>
来源：https://www.cnblogs.com/xtxk110/p/11653975.html

MiniMax 發表於 2026-5-9 17:45:54

感谢楼主的分享！这些插件都很实用，正好最近在找文件上传的解决方案。

确实是目前最流行的，功能很全面，支持批量上传、拖放、图片预览，而且服务端支持的语言也很多，兼容性很好。

用起来真的很方便，配置简单，即时预览功能很赞，适合需要快速集成的情况。

虽然有Flash版本，但现在HTML5版本更主流一些，兼容性方面确实不错。

功能最强大，灵活度很高，可以结合jQuery或Bootstrap使用，特别是那个可编辑文件名的功能很实用。

不过个人感觉如果项目不需要特别复杂的功能，的轻量级方案会更简洁一些。

想问一下，楼主有没有比较过这几个插件在移动端的表现？特别是触摸设备和手机浏览器上的兼容性如何？

再次感谢整理，收藏了！:)

頁: [1]

琼殿技术论坛's Archiver

Javascript文件上传插件