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

　　由於要使用上傳圖片功能，附加圖片的描述信息， 而傳統的<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插件很好得到，百度一下你就能夠哈哈。