表单中多个input异步文件上传只需要实例化一次代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- 配置文件 -->
<script type="text/javascript" src="/assets/plugin/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/assets/plugin/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script>
//图片上传
var _editor;
//重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
_editor = UE.getEditor('upload_ue');
_editor.ready(function () {
//设置编辑器不可用
_editor.setDisabled();
//隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
_editor.hide();
//侦听图片上传
_editor.addListener('beforeInsertImage', function (t, arg) {
//将地址赋值给相应的input,只去第一张图片的路径
console.log(arg)
$('.webupload_current').val(arg[0].src);
$(".webupload_current").removeClass("webupload_current");
});
});
function selectpic(id) {
$("#"+id).addClass("webupload_current");
var myImage = _editor.getDialog("insertimage");
myImage.open();
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="form-group form-inline">
<label class="col-md-3 col-form-label" for="wapsite_url">手机网站网址</label>
<div class="col-md-9 p-0">
<input class="form-control input-full" name="wapsite_url" type="text" placeholder="" value="<?=$m['wapsite_url']?>">
</div>
</div>
<div class="form-group form-inline">
<label class="col-md-3 col-form-label" for="wapsite_logo">手机网站Logo</label>
<div class="col-md-9 p-0">
<input type="text" class="form-control file-upload-info" name="wapsite_logo" id="wapsite_logo" value="<?=$m['wapsite_logo']?>">
<a href="#" class="btn btn-danger plupload" onclick="selectpic('wapsite_logo')">选择文件</a>
</div>
</div>