使用ajaxfileupload.js實現文件上傳

ajaxFileUpload是一個異步上傳文件的jQuery插件

　　語法：$.ajaxFileUpload([options])

　　options參數說明：

1、url　　　　　　　　　　  上傳處理程序地址。　　
2，fileElementId　　　　　  需要上傳的文件域的ID，即<input type="file">的ID。
3，secureuri　　　　　　　 是否啟用安全提交，默認為false。 
4，dataType　　　　　　　 服務器返回的數據類型。可以為xml,script,json,html。如果不填寫，jQuery會自動判斷。
5，success　　　　　　　　提交成功后自動執行的處理函數，參數data就是服務器返回的數據。
6，error　　　　　　　　　 提交失敗自動執行的處理函數。
7，data 　　　　　　　　　 自定義參數。
8, type 　　　　　　　　　  當要提交自定義參數時，這個參數要設置成post

錯誤提示:

1，SyntaxError: missing ; before statement錯誤
　　如果出現這個錯誤就需要檢查url路徑是否可以訪問
2，SyntaxError: syntax error錯誤
　　如果出現這個錯誤就需要檢查處理提交操作的服務器后台處理程序是否存在語法錯誤
3，SyntaxError: invalid property id錯誤
　　如果出現這個錯誤就需要檢查文本域屬性ID是否存在
4，SyntaxError: missing } in XML expression錯誤
　　如果出現這個錯誤就需要檢查文件name是否一致或不存在
5，其它自定義錯誤
　　大家可使用變量$error直接打印的方法檢查各參數是否正確，比起上面這些無效的錯誤提示還是方便很多。

 

第一步：先引入jQuery與ajaxFileUpload插件。注意先后順序

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

第二步：HTML代碼：

<input type="file" id="file1" name="pay"   onchange="ajaxFileUpload()" />

 

第三步：JS代碼

<script type="text/javascript">function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: 'uploadPayorder', //用於文件上傳的服務器端請求地址
                    secureuri: false, //是否需要安全協議，一般設置為false
                    fileElementId: 'file1', //文件上傳域的ID
                    dataType: 'json', //返回值類型 一般設置為json
                    success: function (data)  //服務器成功響應處理函數
                    {
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data)//服務器響應失敗處理函數
                    {
                        alert('失敗');
                    }
                }
            )
            return false;
        }
    </script>

第四步、java代碼

 

public String uploadPayorderImg(){
        String payorder=null;
        Map<String,Object> map= new HashMap<String,Object>();
        JSONObject json = null;//將map對象轉換成json類型數據
        try {
            payorder = new uploadImg().upload(pay, payFileName, payContentType, "/upload");
            System.out.println(payorder);
            boolean r=true;
            if(r){
                map.put("result", "success");
                json=JSONObject.fromObject(map);
                result = json.toString();//給result賦值，傳遞給頁面
            }else{
                map.put("result", "error");
                result = null;//給result賦值，傳遞給頁面
            }
        } catch (FileNotFoundException e) {
            result = null;
            e.printStackTrace();
        } catch (IOException e) {
            result = null;
            e.printStackTrace();
        }
        return SUCCESS;
    }

 建議采用jQuery1.7以上的版本

ajaxfileupload.js下載地址：http://download.csdn.net/detail/qq_33347991/9706564