webuploader 一个页面放置多个上传按钮
[ 2020-12-04 16:15:55 | 作者: admin ]
p.s. js脚本中 index 这个索引值很有用,多个上传的图片数组,需要按这个索引值来命名和保存。
WebUploader 文档部分 http://fex.baidu.com/webuploader/document.html
WebUploader API http://fex.baidu.com/webuploader/doc/index.html
html按钮代码
js处理部分
评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2735
WebUploader 文档部分 http://fex.baidu.com/webuploader/document.html
WebUploader API http://fex.baidu.com/webuploader/doc/index.html
html按钮代码
<div class="uploaderBtnBox">
<!--用来存放item-->
<div id="fileList1" class="uploader-list"></div>
<div class="filePicker">选择图片</div>
</div>
<div class="imgBox"> </div>
<!--用来存放item-->
<div id="fileList1" class="uploader-list"></div>
<div class="filePicker">选择图片</div>
</div>
<div class="imgBox"> </div>
js处理部分
$('.filePicker').each(function(index,el){
console.log(index);
var uploader= WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: './js/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: 'fileupload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: el,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
}
});
//执行删除方法
$(el).parents('.uploaderBtnBox').siblings('.imgBox').on("click", ".cp_img_del", function ()
{
$(el).removeClass( 'element-invisible');
});
//上传成功后执行
uploader.on( 'uploadSuccess', function(file,msg) {
console.log(index+'ok');
$(el).parents('.uploaderBtnBox').siblings('.imgBox').html("<img src='"+msg._raw+"' /><a class='cp_img_del' >删除</a>");
});
//文件上传失败,显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.html('<font color="red">上传失败</font>');
});
});
//外部删除方法2
/*
function deleteFile(obj) {
$(obj).parent().remove();
} */
console.log(index);
var uploader= WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: './js/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: 'fileupload.php',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: el,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
}
});
//执行删除方法
$(el).parents('.uploaderBtnBox').siblings('.imgBox').on("click", ".cp_img_del", function ()
{
$(el).removeClass( 'element-invisible');
});
//上传成功后执行
uploader.on( 'uploadSuccess', function(file,msg) {
console.log(index+'ok');
$(el).parents('.uploaderBtnBox').siblings('.imgBox').html("<img src='"+msg._raw+"' /><a class='cp_img_del' >删除</a>");
});
//文件上传失败,显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.html('<font color="red">上传失败</font>');
});
});
//外部删除方法2
/*
function deleteFile(obj) {
$(obj).parent().remove();
} */
[最后修改由 admin, 于 2020-12-04 16:31:19]

这篇日志没有评论。
此日志不可发表评论。