springmvc+easyui+fileupload實現圖片上傳

  1. 添加依賴關係

    由於本項目是在maven項目管理工具下開發的,所以需要在pom.xml文件裏添加如下依賴關係

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
</dependency>
  1. 在spring.xml中添加文件上傳限制
<bean id="multipartResolver"
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="utf-8" />
    <property name="maxUploadSize" value="10485760000" />
    <property name="maxInMemorySize" value="40960" />
  </bean>
defaultEncoding="UTF-8" 是請求的編碼格式,默認爲iso-8859-1
maxUploadSize="5400000" 是上傳文件的大小,單位爲字節
maxInMemorySize 配置緩存
  1. 前臺上傳實現
<div id="win" class="easyui-dialog" title="修改**" closed="true"
        style="width: 400px; height:auto;"
        data-options="iconCls:'icon-save',modal:true,collapsible:false,minimizable:false,maximizable:false,buttons:'#bbs';}">
        <form id="satmpdefForm" action="http://localhost:8080/mainWeb/system/saveStampdefByForm/" style="padding: 10px 20px 10px 40px;"
             enctype="multipart/form-data" method="post">
            <table>
                <tr>
                    <td>標題:</td>
                    <td><input type="text" name="sTitle" id="sTitle"
                        class="easyui-textbox" style="width: 250px;" required="required"></td>
                </tr>
                <tr>
                    <td>是否加密:</td>
                    <td><input name="benc" id="benc" class="easyui-combobox" style="width: 250px;"
                        data-options="editable:false,panelHeight:'auto',valueField:'v',textField:'t',
        data:[{v: '0',t: '未加密'},{v: '1',t: '加密'}]" value="0"/>
                    </td>
                </tr>
                <tr>
                    <td>密碼:</td>
                    <td><input type="password" name="password" id="password"
                        class="easyui-textbox" style="width: 170px;"><a class="easyui-linkbutton" id="cgePwd"  icon="icon-edit" onClick="changePwd()">修改密碼</a></td>
                </tr>
                <tr>
                    <td>使用者:</td>
                    <td><input type="text" name="userID" id="userID" required="required"
                        class="easyui-textbox" style="width: 250px;"></td>
                </tr>
                <tr>
                <td><input type="hidden" id="rid"  name="rid" class="easyui-textbox" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input name="imgFile" id="imgFile" type="file" required="required"
                        style="width: 100%" accept="image/png,image/jpeg,image/gif"></td>
                </tr>

            </table>
            <div id="Imgdiv" align="center">
        <img id="Img" width="200px" height="200px" alt="預覽圖">
        </div>
        </form>
    </div>
    <div id="bbs">
        <a class="easyui-linkbutton" icon="icon-ok" onClick="submitForm()">保存</a>
        <a class="easyui-linkbutton" icon="icon-cancel" onClick="closeWin()">取消</a>
    </div>
  1. 提交表單
//提交表單數據
    function submitForm() {
                var form = new FormData($('#satmpdefForm')[0]);
                 $.ajax({
                     url: 後臺處理路徑
                     type: 'post',
                     data: form,
                     processData:false,
                     contentType:false,
                     success:function(data){
                        $.messager.show({
                                        title : '提示',
                                        msg : '提交成功',
                                        timeout : 3000,
                                        showType : 'slide'
                                        });
                            $('#win').window('close');
                                        refresh(ctx);
                         },
                        error:function(e){
                            showError('提交失敗');
                     }
                 });
    }
  1. controller層
@RequestMapping("saveStampdefByForm")
    @ResponseBody
    public void saveStampdefByForm(MultipartFile imgFile, String rid,
            String sTitle, String userID, String password, int benc,
            HttpServletRequest request) throws Exception
    {
        InputStream inputStream = imgFile.getInputStream();
        if ((inputStream.available()) != 0)
        {
            // inputStream.available()返回文件的字節長度
            data = new byte[inputStream.available()];
            //// 將文件中的內容讀入到數組中
            inputStream.read(data);
            inputStream.close();
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章