几款极好的 JavaScript 文件上传插件

来源：互联网发布：教数学的软件编辑：程序博客网时间：2024/06/14 23:11

jQuery File Uploader

这是最受欢迎的 jQuery 文件上传组件，支持批量上传，拖放上传，显示上传进度条以及校验功能。

支持预览图片、音频和视频，支持跨域上传和客户端图片缩放，支持的服务端平台有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。

使用示例：

[javascript] view plain copy

print?

(function() {  </li><li class="">'use strict';  </li><li class="alt">// Change this to the location of your server-side upload handler:  </li><li class="">varurl = window.location.hostname === 'blueimp.github.io'?  </li><li class="alt">'//jquery-file-upload.appspot.com/': 'server/php/';  </li><li class="">$('#fileupload').fileupload({  </li><li class="alt">url: url,  </li><li class="">dataType:'json',  </li><li class="alt">done:function (e, data) {  </li><li class="">$.each(data.result.files,function (index, file) {  </li><li class="alt">$('').text(file.name).appendTo('#files');  </li><li class="">});  </li><li class="alt">},  </li><li class="">progressall:function (e, data) {  </li><li class="alt">varprogress = parseInt(data.loaded / data.total * 100, 10);  </li><li class="">$('#progress .progress-bar').css(  </li><li class="alt">'width',  </li><li class="">progress +'%'  </li><li class="alt">);  </li><li class="">}  </li><li class="alt">}).prop('disabled', !$.support.fileInput)  </li><li class="">.parent().addClass($.support.fileInput ? undefined :'disabled');  </li><li class="alt">});  </li></ol></div><pre name="code" class="javascript" style="display: none;">(function() {‘use strict’;// Change this to the location of your server-side upload handler:varurl = window.location.hostname === ‘blueimp.github.io’?‘//jquery-file-upload.appspot.com/’: ‘server/php/’;(‘#fileupload’).fileupload({
url: url,
dataType:’json’,
done:function (e, data) {
$.each(data.result.files,function (index, file) {
$(‘’).text(file.name).appendTo(‘#files’);
});
},
progressall:function (e, data) {
varprogress = parseInt(data.loaded / data.total * 100, 10);
$(‘#progress .progress-bar’).css(
‘width’,
progress +’%’
);
}
}).prop(‘disabled’, !.support.fileInput).parent().addClass($.support.fileInput ? undefined :’disabled’);});

插件下载在线演示

DropZoneJS

DropzoneJS 是一个用于现代浏览器的开源的拖放上传插件，最大的特色是即时图片预览功能。

使用方法非常简单，只需添加 class 即可：

?
<formid="my-awesome-dropzone"action="/target"class="dropzone"></form>

或者手动实例化：

?
newDropzone("div#my-dropzone", {/* options */ });

可以添加更多参数：

?
Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 };

发可以自定义事件：

?
Dropzone.options.myDropzone({
init:function() {
this.on("error",function(file, message) { alert(message); });
}
});
// or if you need to access a Dropzone somewhere else:
varmyDropzone = Dropzone.forElement("div#my-dropzone");
myDropzone.on("error",function(file, message) { alert(message); });<span style="line-height: 1.5;">　</span>

插件下载在线演示

Uploadify

Uploadify 有两个版本，HTML5 方法上传版本和传统的 Flash 上传。支持高度自定义，可以完美的继承到你的网站中。

Flash 版本兼容性好，使用示例：

?
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf :'/uploadify/uploadify.swf',
uploader :'/uploadify/uploadify.php',
width : 120
});
});

插件下载在线演示

FineUploader

这个 JavaScript 插件可以帮助你在网站中集成体验极好的文件上传功能。可以结合 jQuery 或者 Bootstrap 使用。

主要特色：

批量上传
显示进度条
拖放上传
自动或者手动上传，可取消
自定义错误提示信息
自动或者手动重试
内置的校验规则
可编辑文件名称

使用示例：

（1）手动触发上传

[javascript] view plain copy

print?

<divid=“manual-fine-uploader”></div>
<divid=”triggerUpload”class=“btn btn-primary”style=“margin-top: 10px;”>
<iclass=”icon-upload icon-white”> Upload now
</div>
<scriptsrc=”http://code.jquery.com/jquery-latest.js”></script>
<scriptsrc=”jquery.fineuploader-{VERSION}.js”></script>
<script>
(document).ready(function() {  </li><li class="alt">var manualuploader = ('#manual-fine-uploader').fineUploader({  </li><li class="">request: {  </li><li class="alt">endpoint: 'server/handleUploads'  </li><li class="">},  </li><li class="alt">autoUpload: false,  </li><li class="">text: {  </li><li class="alt">uploadButton: '<iclass="icon-plus icon-white"> Select Files'  </li><li class="">}  </li><li class="alt">});  </li><li class="">$(’#triggerUpload’).click(function() {
manualuploader.fineUploader(’uploadStoredFiles’);
});
});
</script>

<divid="manual-fine-uploader"></div><divid="triggerUpload"class="btn btn-primary"style="margin-top: 10px;"><iclass="icon-upload icon-white"></i> Upload now</div><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><scriptsrc="jquery.fineuploader-{VERSION}.js"></script><script>$(document).ready(function() {var manualuploader = $('#manual-fine-uploader').fineUploader({request: {endpoint: 'server/handleUploads'},autoUpload: false,text: {uploadButton: '<iclass="icon-plus icon-white"></i> Select Files'}});$('#triggerUpload').click(function() {manualuploader.fineUploader('uploadStoredFiles');});});</script>

（2）编辑文件名称

[javascript] view plain copy

print?

<!DOCTYPE html>
<html>
<head>
<metacharset=”utf-8”>
<title>Fine Uploader - jQuery Wrapper Minimal Demo</title>
<linkhref=”fineuploader-{VERSION}.css”rel=“stylesheet”>
</head>
<body>
<divid=”jquery-wrapped-fine-uploader”></div>
<divid=”triggerUpload”class=“btn btn-primary”style=“margin-top: 10px;”>
<iclass=”icon-upload icon-white”> Upload now
</div>
<scriptsrc=”http://code.jquery.com/jquery-latest.js”></script>
<scriptsrc=”jquery.fineuploader-{VERSION}.js”></script>
<script>
(document).ready(function () {  </li><li class="alt">('#myFineUploader').fineUploader({  </li><li class="">request: {  </li><li class="alt">endpoint: 'server/handleUploads'  </li><li class="">},  </li><li class="alt">editFilename: {  </li><li class="">enabled: true  </li><li class="alt">},  </li><li class="">autoUpload: false  </li><li class="alt">});  </li><li class="">('#triggerUpload').click(function() {  </li><li class="alt">(’#myFineuploader’).fineUploader(‘uploadStoredFiles’);
});
</script>
</body>
</html>

<!DOCTYPE html><html><head><metacharset="utf-8"><title>Fine Uploader - jQuery Wrapper Minimal Demo</title><linkhref="fineuploader-{VERSION}.css"rel="stylesheet"></head><body><divid="jquery-wrapped-fine-uploader"></div><divid="triggerUpload"class="btn btn-primary"style="margin-top: 10px;"><iclass="icon-upload icon-white"></i> Upload now</div><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><scriptsrc="jquery.fineuploader-{VERSION}.js"></script><script>$(document).ready(function () {$('#myFineUploader').fineUploader({request: {endpoint: 'server/handleUploads'},editFilename: {enabled: true},autoUpload: false});$('#triggerUpload').click(function() {$('#myFineuploader').fineUploader('uploadStoredFiles');});</script></body></html>

（3）自定义选项

[javascript] view plain copy

print?

<divid=“restricted-fine-uploader”></div>
<scriptsrc=”http://code.jquery.com/jquery-latest.js”></script>
<scriptsrc=”jquery.fineuploader-{VERSION}.js”></script>
<script>
(document).ready(function() {  </li><li class="">('#restricted-fine-uploader').fineUploader({  </li><li class="alt">request: {  </li><li class="">endpoint: 'server/success.html'  </li><li class="alt">},  </li><li class="">multiple: false,  </li><li class="alt">validation: {  </li><li class="">allowedExtensions: ['jpeg', 'jpg', 'txt'],  </li><li class="alt">sizeLimit: 51200 // 50 kB = 50 * 1024 bytes  </li><li class="">},  </li><li class="alt">text: {  </li><li class="">uploadButton: 'Click or Drop'  </li><li class="alt">},  </li><li class="">showMessage: function(message) {  </li><li class="alt">// Using Bootstrap's classes  </li><li class="">$(’#restricted-fine-uploader’).append(‘<divclass=”alert alert-error”>’ + message + ‘</div>’);
}
});
});
</script>

<divid="restricted-fine-uploader"></div><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><scriptsrc="jquery.fineuploader-{VERSION}.js"></script><script>$(document).ready(function() {$('#restricted-fine-uploader').fineUploader({request: {endpoint: 'server/success.html'},multiple: false,validation: {allowedExtensions: ['jpeg', 'jpg', 'txt'],sizeLimit: 51200 // 50 kB = 50 * 1024 bytes},text: {uploadButton: 'Click or Drop'},showMessage: function(message) {// Using Bootstrap's classes$('#restricted-fine-uploader').append('<divclass="alert alert-error">' + message + '</div>');}});});</script>

（4）显示图片缩略图

[javascript] view plain copy

print?

<divid=“thumbnail-fine-uploader”></div>
<scriptsrc=”http://code.jquery.com/jquery-latest.js”></script>
<scriptsrc=”jquery.fineuploader-{VERSION}.js”></script>
<script>
(document).ready(function() {  </li><li class="">('#thumbnail-fine-uploader').fineUploader({  </li><li class="alt">request: {  </li><li class="">endpoint: 'server/success.html'  </li><li class="alt">},  </li><li class="">validation: {  </li><li class="alt">allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']  </li><li class="">},  </li><li class="alt">text: {  </li><li class="">uploadButton: 'Click or Drop'  </li><li class="alt">}  </li><li class="">}).on('complete', function(event, id, fileName, responseJSON) {  </li><li class="alt">if (responseJSON.success) {  </li><li class="">$(this).append(‘<imgsrc=”img/success.jpg”alt=”’ + fileName + ‘”>’);
}
});
});
</script>

<divid="thumbnail-fine-uploader"></div><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><scriptsrc="jquery.fineuploader-{VERSION}.js"></script><script>$(document).ready(function() {$('#thumbnail-fine-uploader').fineUploader({request: {endpoint: 'server/success.html'},validation: {allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']},text: {uploadButton: 'Click or Drop'}}).on('complete', function(event, id, fileName, responseJSON) {if (responseJSON.success) {$(this).append('<imgsrc="img/success.jpg"alt="' + fileName + '">');}});});</script>

（5）限制文件上传数

[javascript] view plain copy

print?

<divid=“filelimit-fine-uploader”></div>
<scriptsrc=”http://code.jquery.com/jquery-latest.js”></script>
<scriptsrc=”jquery.fineuploader-{VERSION}.js”></script>
<script>
(document).ready(function() {  </li><li class="">(’#filelimit-fine-uploader’).fineUploader({
request: {
endpoint: ’server/success.html’
},
validation: {
itemLimit: 3
}
});
});
</script>

<divid="filelimit-fine-uploader"></div><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><scriptsrc="jquery.fineuploader-{VERSION}.js"></script><script>$(document).ready(function() {$('#filelimit-fine-uploader').fineUploader({request: {endpoint: 'server/success.html'},validation: {itemLimit: 3}});});</script>

插件下载在线演示

本文转自：http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-five.html

阅读全文

0 0