Simditor图片上传

文章出处http://blog.csdn.net/itmyhome1990/article/details/40374843

上篇文章(Simditor使用方法)只是简单的默认配置,我们可自定义工具栏按钮使其更丰富和实现上传图片功能

初始化编辑器

[javascript] view plain copy

 

1. <script type="text/javascript">  
2.    $(function(){  
3.     toolbar = [ 'title', 'bold', 'italic', 'underline', 'strikethrough',  
4.             'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',  
5.             'link', 'image', 'hr', '|', 'indent', 'outdent' ];  
6.     var editor = new Simditor( {  
7.         textarea : $('#editor'),  
8.         placeholder : '这里输入内容...',  
9.         toolbar : toolbar,  //工具栏  
10.         defaultImage : 'simditor-2.0.1/images/image.png', //编辑器插入图片时使用的默认图片  
11.         upload : {  
12.             url : 'ImgUpload.action', //文件上传的接口地址  
13.             params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交  
14.             fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名  
15.             connectionCount: 3,  
16.             leaveConfirm: '正在上传文件'  
17.         }   
18.     });  
19.    })  
20. </script>  

upload默认为false,设置为true或者键值对就可以实现上传图片,界面是出来了,还需要进行后台编码(本例为Struts2)

实现功能之前需要修改一下simditor.js,我们可以对"本地图片" 用chrome审查元素发现没有name属性

打开simditor.js找到

return $input = $('<input type="file" title="' + Simditor._t('uploadImage') + '" accept="image/*">').appendTo($uploadItem);这一行,

可以搜索accept="image/*"  快速找到在input里加上 name="fileData"

如下：

[html] view plain copy

 

1. return _this.input = $('<input name="fileData" type="file" title="' + Simditor._t('uploadImage')   
2. + '" accept="image/*">').appendTo($uploadBtn);  

同样继续搜索accept="image/*"  下面还有一个,加上name="fileData"

ImgUploadAction

[java] view plain copy

 

1. public class ImgUploadAction extends ActionSupport {    
2.     private static final long serialVersionUID = 1L;  
3.     private String err = "";    
4.     private String msg;              //返回信息    
5.     private File fileData;           //上传文件    
6.     private String fileDataFileName; //文件名    
7.     
8.     public String imgUpload() {    
9.         //获取response、request对象    
10.         ActionContext ac = ActionContext.getContext();    
11.         HttpServletResponse response = (HttpServletResponse) ac.get(ServletActionContext.HTTP_RESPONSE);    
12.         HttpServletRequest request = (HttpServletRequest) ac.get(ServletActionContext.HTTP_REQUEST);    
13.             
14.         response.setContentType("text/html;charset=gbk");    
15.             
16.         PrintWriter out = null;    
17.         try {    
18.             out = response.getWriter();    
19.         } catch (IOException e1) {    
20.             e1.printStackTrace();    
21.         }    
22.     
23.         String saveRealFilePath = ServletActionContext.getServletContext().getRealPath("/upload");    
24.         File fileDir = new File(saveRealFilePath);    
25.         if (!fileDir.exists()) { //如果不存在 则创建     
26.             fileDir.mkdirs();    
27.         }    
28.         File savefile;    
29.         savefile = new File(saveRealFilePath + "/" + fileDataFileName);   
30.         try {    
31.             FileUtils.copyFile(fileData, savefile);    
32.         } catch (IOException e) {    
33.             err = "错误"+e.getMessage();    
34.             e.printStackTrace();    
35.         }    
36.         String file_Name = request.getContextPath() + "/upload/" + fileDataFileName;    
37.           
38.         msg = "{\"success\":\"" + true + "\",\"file_path\":\"" + file_Name + "\"}";    
39.         out.print(msg); //返回msg信息    
40.         return null;    
41.     }    
42.     
43.     public String getErr() {    
44.         return err;    
45.     }    
46.     public void setErr(String err) {    
47.         this.err = err;    
48.     }    
49.       
50.     public String getMsg() {    
51.         return msg;    
52.     }    
53.     public void setMsg(String msg) {    
54.         this.msg = msg;    
55.     }  
56.       
57.     public File getFileData() {  
58.         return fileData;  
59.     }  
60.     public void setFileData(File fileData) {  
61.         this.fileData = fileData;  
62.     }  
63.       
64.     public String getFileDataFileName() {  
65.         return fileDataFileName;  
66.     }  
67.     public void setFileDataFileName(String fileDataFileName) {  
68.         this.fileDataFileName = fileDataFileName;  
69.     }    
70. }