Home > Backend Development > PHP Tutorial > About the problem of uploading pictures in simditor

About the problem of uploading pictures in simditor

PHP中文网
Release: 2023-03-01 07:06:01
Original
3721 people have browsed it

We can customize the toolbar buttons to make simditor richer and realize the function of uploading pictures

Initialize the editor

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

upload defaults to false, set it to true or key-value pair to upload pictures, the interface is out, and Background coding is required (Struts2 in this case)

About the problem of uploading pictures in simditor

You need to modify simditor.js before implementing the function. We can use chrome to inspect the element for "local pictures" and find that there is no name attribute

About the problem of uploading pictures in simditor

Open simditor.js and find it

return $input = $('').appendTo($uploadItem) ;In this line,

you can search accept="image/*" to quickly find and add name="fileData"

in the input as follows:

return _this.input = $(&#39;<input name="fileData" type="file" title="&#39; + Simditor._t(&#39;uploadImage&#39;) 
+ &#39;" accept="image/*">&#39;).appendTo($uploadBtn);
Copy after login

Also continue to search accept="image/*" There is another one below, add name="fileData"

ImgUploadAction

public class ImgUploadAction extends ActionSupport {  
    private static final long serialVersionUID = 1L;
    private String err = "";  
    private String msg;              //返回信息  
    private File fileData;           //上传文件  
    private String fileDataFileName; //文件名  
  
    public String imgUpload() {  
        //获取response、request对象  
        ActionContext ac = ActionContext.getContext();  
        HttpServletResponse response = (HttpServletResponse) ac.get(ServletActionContext.HTTP_RESPONSE);  
        HttpServletRequest request = (HttpServletRequest) ac.get(ServletActionContext.HTTP_REQUEST);  
          
        response.setContentType("text/html;charset=gbk");  
          
        PrintWriter out = null;  
        try {  
            out = response.getWriter();  
        } catch (IOException e1) {  
            e1.printStackTrace();  
        }  
  
        String saveRealFilePath = ServletActionContext.getServletContext().getRealPath("/upload");  
        File fileDir = new File(saveRealFilePath);  
        if (!fileDir.exists()) { //如果不存在 则创建   
            fileDir.mkdirs();  
        }  
        File savefile;  
        savefile = new File(saveRealFilePath + "/" + fileDataFileName); 
        try {  
            FileUtils.copyFile(fileData, savefile);  
        } catch (IOException e) {  
            err = "错误"+e.getMessage();  
            e.printStackTrace();  
        }  
        String file_Name = request.getContextPath() + "/upload/" + fileDataFileName;  
        
        msg = "{\"success\":\"" + true + "\",\"file_path\":\"" + file_Name + "\"}";  
        out.print(msg); //返回msg信息  
        return null;  
    }  
  
    public String getErr() {  
        return err;  
    }  
    public void setErr(String err) {  
        this.err = err;  
    }  
    
    public String getMsg() {  
        return msg;  
    }  
    public void setMsg(String msg) {  
        this.msg = msg;  
    }
    
    public File getFileData() {
        return fileData;
    }
    public void setFileData(File fileData) {
        this.fileData = fileData;
    }
    
    public String getFileDataFileName() {
        return fileDataFileName;
    }
    public void setFileDataFileName(String fileDataFileName) {
        this.fileDataFileName = fileDataFileName;
    }  
}
Copy after login

Related articles:

How to use Simditor

javascript - simditor Is there a size limit for uploading images?

javascript - simditor failed to upload large image

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template