HTML:
<img src="/images/btn_addfile.png" οnclick="upImage()" />上传按钮,打开UEditor相册模块
<script type="text/plain" id="j_ueditorupload" style="height: 5px; display: none;"></script>
Script:(上传调用的是UEditor配置好的,这里是处理 选择图片后把图片集合返回并传递参数到ajax调用的后台,做业务处理)
<script type="text/javascript">
//实例化编辑器
var o_ueditorupload = UE.getEditor('j_ueditorupload', { autoHeightEnabled: false });
o_ueditorupload.ready(function() {
o_ueditorupload.hide(); //隐藏编辑器
//监听图片上传
o_ueditorupload.addListener('beforeInsertImage', function(t, arg) {
if (arg.length > 0) {
var argjson = JSON.stringify(arg);
var menuid = $('#<%=this.hidMenuID.ClientID %>').val();
PageMethods.ModulePhotoUpload(argjson, menuid, InsModulePhotoCallBack);
}
});
});
//图片上传回调函数
function InsModulePhotoCallBack(success) {
jAlert(success);
$('#<%=this.btnModulePhotoInitialize.ClientID %>').click();
}
//弹出图片上传的对话框
function upImage() {
var myImage = o_ueditorupload.getDialog("insertimage");
myImage.open();
}
</script>
Ajax后台
/// <summary>
///
/// </summary>
/// <param name="arg"></param>
/// <returns>1 上传完成,2上传失败</returns>
[System.Web.Services.WebMethod()]
[System.Web.Script.Services.ScriptMethod()]
public static string ModulePhotoUpload(string argjson, int menuid)
{
BL.ModulePhoto photoBL = new BL.ModulePhoto();
List<UEditorImageModel> arg = JsonHelper.FromJson<List<UEditorImageModel>>(argjson);
foreach (UEditorImageModel item in arg)
{
MD.ModulePhotoInfo entity = new MD.ModulePhotoInfo();
entity.MenuID = menuid;
entity.ImgPath = item.src;
entity.IsShow = true;
entity.FileID = -1;
entity.Title = "";
entity.Remark = "";
entity.SeqNumber = (photoBL.SelectCount(n => n.MenuID == menuid) + 1);
photoBL.Insert(entity);
}
return "上传完成";
}
/// <summary>
/// UEditor上传图片集合Model
/// </summary>
public class UEditorImageModel
{
public string src;
public string _src;
public string alt;
public string floatStyle;
}
作者:China_Lzw
链接:https://blog.csdn.net/qq285679784/article/details/76675733
来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。