simditorでの写真アップロードの問題について

ツールバーのボタンをカスタマイズして、simditorをよりリッチにし、写真をアップロードする機能を実現できます

エディタを初期化します

<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>

uploadのデフォルトはfalseに設定し、画像をアップロードするにはtrueまたはキーと値のペアに設定します。インターフェースは終了し、バックグラウンドコーディングが必要です (この場合は Struts2)

関数を実装する前に、simditor.js を変更する必要があります。Chrome を使用して要素を検査して「ローカル画像」を調べ、name 属性がないことを確認できます

。

simditor.jsを開いて見つけます

return $input = $('').appendTo($uploadItem) ;この行では、

次のように accept="image/*" を検索して、すぐに name="fileData"

を入力に追加できます:

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

また、accept="image/*" の検索を続けます。下にもう 1 つあり、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;
    }  
}

関連記事:

Simditor の使い方

javascript - simditorアップロードする画像のサイズに制限はありますか?

javascript - simditorは大きな画像をアップロードできませんでした