Ajax 专栏
欢迎使用 入门客AI创业平台
当前位置： 入门客AI创业平台 > 学习手册 》 Ajax 专栏 》 几款极好的 JavaScript 文件上传插件

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

jQuery File Uploader

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

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

使用示例：

$(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) {
$("<p/>").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）手动触发上传

<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）编辑文件名称

<!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）自定义选项

<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）显示图片缩略图

<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）限制文件上传数

<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

文章导航