实现方法
上传div设置class=”filePicker”,添加方法addWebuploadCurrent(回调值input的id);
html部分
<div class="col-sm-5 col-xs-9">
<p>请上照片</p>
<div class="child-img">
<img src="__PUBLIC__/lfey/images/child.png" id="preview_img1">
</div>
<div class="filePicker" onclick="addWebuploadCurrent('child_pic')">上传</div>
<input type="hidden" name="child_pic" id="child_pic">
</div>
<div class="col-sm-5 col-xs-9">
<div class="filePicker" onclick="addWebuploadCurrent('residence_photo')">上传</div>
<input type="hidden" name="residence_photo" id="residence_photo">
<img src="" id="residence_photo_preview" style="width: 200px;">
</div>
js部分
<script type="text/javascript">
var BASE_URL = '__PUBLIC__/2016dean/webuploader';
var APP = '__APP__/Index/upload_pic';
function addWebuploadCurrent(id) {
$(".webupload_current").removeClass("webupload_current");
$("#"+id).addClass("webupload_current");
}
</script>
<script type="text/javascript">
// 图片上传
jQuery(function() {
var $ = jQuery,
ratio = window.devicePixelRatio || 1,
thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio,
uploader;
uploader = WebUploader.create({
fileNumLimit:10,
auto: true,
swf: BASE_URL + '/Uploader.swf',
server: APP,
pick: '.filePicker',
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png'
}
});
uploader.on('fileQueued', function (file) {
$(".webupload_current").before('<label>正在上传,请稍等...</label>');
});
uploader.on( 'uploadSuccess', function( file, data) {
$("#" + file.id).remove();
$(".webupload_current").prev().remove();
$(".webupload_current").val(data._raw);
if($(".webupload_current").attr("id") == 'residence_photo'){
$("#residence_photo_preview").attr('src',data._raw);
}else{
$('#preview_img1').attr('src',data._raw);
}
});
uploader.addButton({
id: '#filePicker1'
});
});
</script>