发现百度的Ueditor富文本编辑器中的多图片上传控件很不错，于是便想着分享出来使用，费了老劲，少不了无名朋友的帮助，也查了不少资料，终于搞定了。
1.首先要在html页面中添加对ueditor的脚本引用
1
2
3
4
| <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../public/ueditor/editor_all_min.js" type="text/javascript"></script>
<script src="../public/ueditor/editor_config.js" type="text/javascript"></script>
<link href="../public/ueditor/themes/default/css/ueditor.css" rel="stylesheet" type="text/css" />
|
2.添加多图片上传控件的单独调用，最原始的代码是无名朋友写的，缺少在线预览。这是加上以后的代码，尽量写得完整一点。
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <table id="table_edit" cellpadding="0" cellspacing="0">
<tr>
<td class="td_left">
文章主图
</td>
<td>
<input type="button" id="btn_uploadimgs" onclick="upImage();" value="上传图片" style="width: 153px;height: 30px;" />
<script type="text/javascript">
var myEditorImage;
var d;
function upImage() {
d = myEditorImage.getDialog("insertimage");
d.render();
d.open();
}
myEditorImage = new UE.ui.Editor();
myEditorImage.render('myEditorImage');
myEditorImage.ready(function() {
myEditorImage.setDisabled();
myEditorImage.hide();
myEditorImage.addListener('beforeInsertImage',
function(t, arg) {
if (arg.length > 0) {
var tr = document.getElementById("tr_Article_Img");
$("#tr_Article_Img").show();
$("#img_Article_Img").attr("src", arg[0].src);
var imgsrc = arg[0].src;
var src = imgsrc.substr(imgsrc.indexOf("uploadfiles"), imgsrc.length);
$("#Article_Img").val(src);
}
});
});
</script>
</td>
</tr>
<tr id="tr_Article_Img" style="display: none;">
<td valign="top" class="td_left">
文章主图
</td>
<td style="padding: 7px; padding-left: 15px;">
<img id="img_Article_Img" alt="" src="" />
<input id="Article_Img" name="Article_Img" type="hidden" />
</td>
</tr>
</table>
|
3.效果还不错吧: ）
(1)点击上传图片，弹出控件（我把网络图片上传隐藏了，只剩下本地上传）
(2)点击添加图片可以从本地选择多个图片
(3)点击开始上传，上传到服务器，点击确认，关闭控件，并把所以上传的图片显示到页面上。
要注意的几点：
1.现在是单个文件显示，如果要显示多个文件，需要循环”arg”参数，并显示到页面上，”arg”是回传过来的img元素集合
2.对editor_config.js里的图片上传保存路径的配置，把文件保存在自己想要的位置。
http://wenku.baidu.com/view/88cbfee6aeaad1f346933f25?fr=prin