關於ajaxfileupload.js上傳圖片使用曆程(struts2)

標籤：style   class   blog   code   java   http   

　　因為要使用上傳圖片功能，附加圖片的描述資訊， 而傳統的<s: file/>由於一些限制在這個小模組中無法使用， 於是搜到了使用ajaxfileupload.js外掛程式進行上傳的方法，在使用過程中，jsp,js,struts2

　　因為自己不熟悉ajax的情況出了許多的小問題，在這裡記錄一下， 方便自己查看，也希望能幫到他人，

　　首先說一下思路，通過點擊上傳直接觸發js 的function 調用後台把圖片拷貝到指定伺服器目錄，返回儲存的路徑到前台，然後跟隨圖片描述資訊一起用ajax非同步傳到後台。（PS：如果有新的方法，麻煩請告知，我只會這個了）

　　首先，我先把jsp代碼貼上來，

<input type="file" onchange="uploadImage(this)" id="newsImgFile" name="tbslidefile" /><input type="hidden" id="imgPath"  name="imgPath" /><div class="newlyhead">標題：</div><div class="newlycontent"><input type="text" class="upload_title" id="slideTitle" name="slideTitle"></div><input type="button"  value="保    存"  onclick="saveTwo();"  >

記得添加進來需要的js外掛程式，這裡我自己寫的js叫做index.js

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="js/index.js"></script>

下面是我自己寫的js代碼

function uploadImage(obj) {    var fileElementId = "newsImgFile";　　//注意這裡newsImgFile是上面 input type="file"的 id 如果需要修改記得一起修改    $("#newsImgFile").attr(‘name‘,‘file‘);　　//明顯.attr就是設定元素的屬性值，當然如果單純上傳圖片的話可以不用這麼麻煩，直接在下面fileElementId:**屬性跟input的id name一致就OK了，通過再次轉換，可以方便在js中進行不同圖片的控制，當然這裡沒用到    alert("test");　　//只是查看是否執行到了這裡，可以去掉　　　　　　　　　　        $.ajaxFileUpload({            url:‘uploadAction‘,       //需要連結到伺服器位址            secureuri:false,            fileElementId:fileElementId,                            //檔案選擇框的id屬性            dataType: ‘json‘,                                   //伺服器返回的格式，可以是其他            success: function (response, status, xhr) {               //成功後的回呼函數                console.log(response.obj);　　　　　　　　　　　　//這個方法可以在瀏覽器（chrome等）審查元素時候控制台console輸出                    //alert(response.obj);                    $(‘#imgPath‘).val(response.obj);　　　　　　//這個就是為上面input id="imgPath"賦值，一起傳到後台            },            error: function (data, status, e) {           //相當於java中catch語句塊的用法                $(‘#imgPath‘).val(‘‘);            }        });}function saveTwo(){    $.ajax({     type: "post",    dataType: "text",    contentType:"application/x-www-form-urlencoded; charset=utf-8",    url: "addSlide", 　　　　//都是Action因為是使用struts2架構    data: {        slideTitle:$("#slideTitle").val(),        slidePath:$("#imgPath").val()    },    success: function(response, status, xhr) {        console.log(response);　　//response是返回的值        alert(status);　　　　//status是狀態，例如success        if(status=="success")        {            jAlert("添加成功！","提示資訊");        }         else        {            jAlert("添加失敗！","提示資訊");        }    } });}

相信上面關於js的說明會很清楚，接下來是後台代碼，單純接收到js上傳的圖片並返迴路徑到前面js

package *****import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.text.SimpleDateFormat;import java.util.Date;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;/** *@author  E—mail: *@version  create time:2014-6-16上午10:43:43 *class introduce */public class UploadAction extends ActionSupport {    private File file;    private String fileFileName;        private String savePath;    private String obj;    /**     * 私人變數file要和js中$("#newsImgFile").attr(‘name‘,‘file‘);一致，這樣可以直接接受過來     * 這裡是單純的圖片上傳到伺服器，這個savePath是在struts.xml中配置的     *      *       */    @Override    public String execute() throws Exception {        String bigurl = "";        SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss");        Date now = new Date();        String dDir = sf.format(now);        String fExt = fileFileName.substring(fileFileName.lastIndexOf("."));        String savePath = ServletActionContext.getServletContext().getRealPath(this.getSavePath());        bigurl = savePath+"\\"+dDir + fExt;        try {            File f = this.getFile();            FileInputStream inputStream = new FileInputStream(f);            FileOutputStream outputStream = new FileOutputStream(bigurl);            byte[] buf = new byte[1024];            int length = 0;            while ((length = inputStream.read(buf)) != -1) {                outputStream.write(buf, 0, length);            }            inputStream.close();            outputStream.flush();            outputStream.close();        } catch (Exception e) {            e.printStackTrace();        }                //直接是字串前面就可以接收到，要是跟下面注釋一樣轉換成json前面還要轉換，我試過這樣可以直接在前面js中response得到，        obj =bigurl.substring(bigurl.lastIndexOf("fileResources")) ;    //        System.out.println("\"success\":true,\"url\":\""+dDir+"/"+fExt+"\",\"bigurl\":\""+bigurl+"\"");//        JSONObject jsonobj = JSONObject.fromObject(path);//        obj = jsonobj.toString();        return SUCCESS;    }    public File getFile() {        return file;    }    public void setFile(File file) {        this.file = file;    }    public String getFileFileName() {        return fileFileName;    }    public void setFileFileName(String fileFileName) {        this.fileFileName = fileFileName;    }    public String getSavePath() {        return savePath;    }    public void setSavePath(String savePath) {        this.savePath = savePath;    }    public String getObj() {        return obj;    }    public void setObj(String obj) {        this.obj = obj;    }}

至於傳圖片路徑和圖片標題到後台，得到並儲存，就是淡出的struts2幕後處理，就沒必要貼出來了，

struts.xml中配置這個Action

<action name="uploadAction" class="com.gt.***.action.UploadAction" >    <param name="savePath">/fileResources/imageFile</param>    <result name="success" type="json">        <param name="contentType">            text/html        </param>                </result></action>

至於為什麼param是這樣的，我沒仔細深究，如果有朋友知道麻煩告訴我，謝謝。

另外ajaxfileupload.js外掛程式很好獲得，百度一下你就可以哈哈。