jquery得file upload插件的基本使用
秦才
基于Jquery的file upload插件是非常强大的一款文件上传插件，它提供了非常多的特性，大大方便了我们对于文件上传的操作。
一般来说，为了使用这款插件，我们只需要引入Jquery、jquery.ui.widget、jquery.fileupload这三个JS文件即可，另外，如果希望能够上传包含html的内容，还需要导入jquery.iframe-transport这个插件。
下面就file upload插件的基本使用做一个说明：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="D:\frontendStudy\assets\css\bootstrap.min.css">
<link rel="stylesheet" href="D:\frontendStudy\assets\css\jquery.fileupload.css" />
<link rel="stylesheet" href="D:\frontendStudy\assets\css\jquery.fileupload-ui.css" />
<style>
.file {
position: relative;
background: linear-gradient(to right, lightblue 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 1s ease;
}
.file.done {
background: lightgreen;
}
.file a {
display: block;
position: relative;
padding: 5px;
color: black;
}
</style>
</head>
<body>
<div class="container">
<input id="fileupload" type="file" name="files[]" multiple>
</div>
<script src="D:\frontendStudy\assets\js\jquery-1.12.4-uncompressed.js"></script>
<script src="D:\frontendStudy\assets\js\bootstrap.min.js"></script>
<script src="D:\frontendStudy\assets\js\jquery.ui.widget.js"></script>
<!-- <script src="D:\frontendStudy\assets\js\jquery.iframe-transport.js"></script> -->
<script src="D:\frontendStudy\assets\js\jquery.fileupload.js"></script>
<script>
$(function () {
$("#fileupload").fileupload({
dataType: "json",
url: 'http://jquery-file-upload.appspot.com/',
add: function (e, data) {
data.context = $('<p class="file">')
.append($('<a target="_blank">').text(data.files[0].name))
.appendTo(document.body);
data.submit();
},
progress: function (e, data) {
var progress = parseInt((data.loaded / data.total) * 100, 10);
data.context.css("background-position-x", 100 - progress + "%");
},
done: function (e, data) {
data.context
.addClass("done")
.find("a")
.prop("href", data.result.files[0].url);
}
});
});
</script>
</body>
</html>注意到在最下方的script中包含了fileupload的初始化代码。
类似资料：