快捷導(dǎo)航

JQuery插件ajaxfileupload.js異步上傳文件實例

更新時間：2015年05月19日 09:08:36 投稿：junjie

這篇文章主要介紹了JQuery插件ajaxfileupload.js異步上傳文件實例,本文直接給出了HTML代碼和JS代碼以及后臺處理代碼,需要的朋友可以參考下

在服務(wù)器端做文件上傳的過程中，如果使用web服務(wù)器短端的上傳控件去上傳文件的話，會導(dǎo)致頁面刷新一次，這樣對用戶的體驗就不是很友好了。ajaxfileupload.js是一款jQuery的異步上傳文件插件，使用簡單且容易上手。

前置條件：ajaxfileupload.js文件，百度下載一個就行。

JS引用：

復(fù)制代碼代碼如下:

<script src="/Content/JQueryJS/jquery-2.1.1.js"></script>

<script src="/Content/Js/ajaxfileupload.js"></script>

html代碼：

復(fù)制代碼代碼如下:

JS代碼：

復(fù)制代碼代碼如下:

function saveCInfo() {

            var filename = document.getElementById("fileToUpload").value;

            if (filename != "") {

                $.ajaxFileUpload({

                    url: '../Order/OrderExec.ashx?oprMode=fileUpload' + "&filename=" + filename + "&billno=" + billno + "&companyname=" + companyname,

                    secureuri: false,

                    fileElementId: 'fileToUpload',//上傳控件ID

                    //dataType: 'json',

                    error: function () { alert('error'); },

                    success: function (datax) {

                        if (datax != "") {

                            msgShow('系統(tǒng)提示', '上傳成功!', 'info');

                        } else {

                            msgShow('系統(tǒng)提示', '上傳失敗!', 'info');

                        }

                    }

                });

            } else {

                $.messager.alert('提示', '請選擇上傳文件', 'info');

            }

        }

后臺代碼：

復(fù)制代碼代碼如下:

public void FileUpload(HttpContext context)
        {
            try
            {
                context.Response.ContentType = "text/html";
                string companyname = context.Request.Params["companyname"];
                string billno = context.Request.Params["billno"];
                string filename = context.Request.Params["filename"];
                string name = companyname + "_" + billno + "_" + filename;
                HttpFileCollection files = HttpContext.Current.Request.Files;
                //指定上傳文件在服務(wù)器上的保存路徑
                string savePath = context.Server.MapPath("~/upload/");
                //檢查服務(wù)器上是否存在這個物理路徑，如果不存在則創(chuàng)建
                if (!System.IO.Directory.Exists(savePath))
                {
                    System.IO.Directory.CreateDirectory(savePath);
                }
                savePath = savePath + name;//上傳文件路徑
                files[0].SaveAs(savePath);//保存文件
                context.Response.Write(savePath);
            }
            catch (Exception ex)
            {
                context.Response.Write("FileUpload: " + ex.Message);
            }

}

您可能感興趣的文章: