plupload多按钮上传jquery
plupload可以轻松实现拖动、点击上传等功能,但是没有明确说明,多按钮上传方式(不要告诉我复制粘贴改browse_button这种方式)。
下面,我们就来探索这样的功能,初始化一段plupload代码,实现多个上传按钮。
...
plupload可以轻松实现拖动、点击上传等功能,但是没有明确说明,多按钮上传方式(不要告诉我复制粘贴改browse_button这种方式)。
下面,我们就来探索这样的功能,初始化一段plupload代码,实现多个上传按钮。
1 HTML代码
HTML代码如下:
<div>
<div class="upload-box">
<input type="text" name="pic1" value=""/>
<div class="preview"><img src=""></div>
<div class="process none">
<span class="filename"></span>
<span class="filesize"></span>
<span class="percent"></span>
</div>
<button id="pickfiles1" class="browse_button" data-upload-url="upload.php" data-extensions="jpg,png,gif,bmp" data-max-size="10mb" data-base-url="www.awaimai.com">图片1</button>
</div>
<div class="upload-box">
<input type="text" name="pic1" value=""/>
<div class="preview"><img src=""></div>
<div class="process none">
<span class="filename"></span>
<span class="filesize"></span>
<span class="percent"></span>
</div>
<button id="pickfiles2" class="browse_button" data-upload-url="upload.php" data-extensions="jpg,png,gif,bmp" data-max-size="10mb" data-base-url="www.awaimai.com">图片2</button>
</div>
<div class="upload-box">
<input type="text" name="pic1" value=""/>
<div class="preview"><img src=""></div>
<div class="process none">
<span class="filename"></span>
<span class="filesize"></span>
<span class="percent"></span>
</div>
<button id="pickfiles3" class="browse_button" data-upload-url="upload.php" data-extensions="jpg,png,gif,bmp" data-max-size="10mb" data-base-url="www.awaimai.com">图片3</button>
</div>
</div>
添加图片后显示文件名和文件尺寸,上传过程显示进度在percent中,上传完成后把路径填入input,以供提交。
其中,button中有几个属性会传递给plupload,
id:必须不同。
class:必须为browse_button,与JS代码对应。
data-upload-url:服务器处理上传地址。
data-extensions:允许上传的文件后缀。
data-max-size:允许上传的最大尺寸。
首先,引入JQuery和plupload.full.min.js文件,
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./plupload/plupload.full.min.js"></script>
然后初始化plupload:
<script type="text/javascript">
var uploaders = [];
var initUploaders = function(uploaders) {
$(".browse_button").each(function() {
self = $(this);
var browse_button_id = self.attr('id'),
base = self.attr('data-base-url'),
upload_url = self.attr('data-upload-url'),
max_size = self.attr('data-max-size'),
file_extensions = self.attr('data-extensions'),
input = self.siblings('input'),
process = self.siblings('.process'),
preview = self.siblings('.preview');
var flash_swf_url = './plupload/Moxie.swf',
silverlight_xap_url = './plupload/Moxie.xap';
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: browse_button_id,
url: upload_url,
flash_swf_url: flash_swf_url,
silverlight_xap_url: silverlight_xap_url,
filters: {
max_file_size: max_size,
mime_types: [
{title: "Image files", extensions: file_extensions}
]
},
init: {
PostInit: function () {
},
FilesAdded: function (up, files) {
plupload.each(files, function (file) {
process.attr('id', file.id).removeClass('none');
process.find('.filename').html(file.name + ', ');
process.find('.filesize').html(plupload.formatSize(file.size) + ', ');
});
up.start();
},
UploadProgress: function (up, file) {
process.find('.percent').html(file.percent + '%');
},
FileUploaded: function (up, file, result) {
var responseJson = JSON.parse(result.response);
var filepath = responseJson.result;
input.val(filepath);
preview.children('img').attr('src', base + filepath);
}
}
});
uploader.init();
uploaders.push(uploader);
});
};
initUploaders(uploaders);
</script>
每添加一个上传按钮,只需为其添加browse_button的class,就可以了。
下面,我们就来探索这样的功能,初始化一段plupload代码,实现多个上传按钮。
1 HTML代码
HTML代码如下:
<div>
<div class="upload-box">
<input type="text" name="pic1" value=""/>
<div class="preview"><img src=""></div>
<div class="process none">
<span class="filename"></span>
<span class="filesize"></span>
<span class="percent"></span>
</div>
<button id="pickfiles1" class="browse_button" data-upload-url="upload.php" data-extensions="jpg,png,gif,bmp" data-max-size="10mb" data-base-url="www.awaimai.com">图片1</button>
</div>
<div class="upload-box">
<input type="text" name="pic1" value=""/>
<div class="preview"><img src=""></div>
<div class="process none">
<span class="filename"></span>
<span class="filesize"></span>
<span class="percent"></span>
</div>
<button id="pickfiles2" class="browse_button" data-upload-url="upload.php" data-extensions="jpg,png,gif,bmp" data-max-size="10mb" data-base-url="www.awaimai.com">图片2</button>
</div>
<div class="upload-box">
<input type="text" name="pic1" value=""/>
<div class="preview"><img src=""></div>
<div class="process none">
<span class="filename"></span>
<span class="filesize"></span>
<span class="percent"></span>
</div>
<button id="pickfiles3" class="browse_button" data-upload-url="upload.php" data-extensions="jpg,png,gif,bmp" data-max-size="10mb" data-base-url="www.awaimai.com">图片3</button>
</div>
</div>
添加图片后显示文件名和文件尺寸,上传过程显示进度在percent中,上传完成后把路径填入input,以供提交。
其中,button中有几个属性会传递给plupload,
id:必须不同。
class:必须为browse_button,与JS代码对应。
data-upload-url:服务器处理上传地址。
data-extensions:允许上传的文件后缀。
data-max-size:允许上传的最大尺寸。
data-base-url:图片预览基地址。
首先,引入JQuery和plupload.full.min.js文件,
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./plupload/plupload.full.min.js"></script>
然后初始化plupload:
<script type="text/javascript">
var uploaders = [];
var initUploaders = function(uploaders) {
$(".browse_button").each(function() {
self = $(this);
var browse_button_id = self.attr('id'),
base = self.attr('data-base-url'),
upload_url = self.attr('data-upload-url'),
max_size = self.attr('data-max-size'),
file_extensions = self.attr('data-extensions'),
input = self.siblings('input'),
process = self.siblings('.process'),
preview = self.siblings('.preview');
var flash_swf_url = './plupload/Moxie.swf',
silverlight_xap_url = './plupload/Moxie.xap';
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: browse_button_id,
url: upload_url,
flash_swf_url: flash_swf_url,
silverlight_xap_url: silverlight_xap_url,
filters: {
max_file_size: max_size,
mime_types: [
{title: "Image files", extensions: file_extensions}
]
},
init: {
PostInit: function () {
},
FilesAdded: function (up, files) {
plupload.each(files, function (file) {
process.attr('id', file.id).removeClass('none');
process.find('.filename').html(file.name + ', ');
process.find('.filesize').html(plupload.formatSize(file.size) + ', ');
});
up.start();
},
UploadProgress: function (up, file) {
process.find('.percent').html(file.percent + '%');
},
FileUploaded: function (up, file, result) {
var responseJson = JSON.parse(result.response);
var filepath = responseJson.result;
input.val(filepath);
preview.children('img').attr('src', base + filepath);
}
}
});
uploader.init();
uploaders.push(uploader);
});
};
initUploaders(uploaders);
</script>
每添加一个上传按钮,只需为其添加browse_button的class,就可以了。
最新评论
热门推荐
我要评论