1. 程式人生 > >用form表單input type="file"上傳檔案(提交前判斷)

用form表單input type="file"上傳檔案(提交前判斷)

1、用/jquery.form.js上傳檔案,提交前判斷是否選擇了檔案(之前很糾結判斷問題,寫在beforeSend裡面不管什麼情況都會提交)

2、用ajax接收資訊

3、優化提交按鈕樣式

HTML頁面程式碼:

<script src="/JS/jquery.form.js" type="text/javascript"></script>

<div class="content">
    <div class="up_com">
        <h3>Upload File    </h3>
        <form name="form1" id="fileForm" action="/Ajax.ashx?action=SendFiles"
role="form" method="post" ENCTYPE="multipart/form-data" onsubmit="return checkUser();">
            <div class="upbtn">
                 <div class="pc">
                    <a><span class="btn">Select file :</span><img src="Img/up.png" alt="up" />
                    </a>
                 </div>
                 <input type="file" id="uploadedfile" name="uploadedfile"  />
                 <span id="txtfilename" style="margin:10px; display:block;"></span>
                 <input type="submit" class="zsk7 submit" value="Click upload" id="upload" />
                 <div class="loading" style="display:none;">Uploading......</div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">

    /*上傳檔案控制元件*/
    $("#uploadedfile").change(function () {
        var filename = $(this).val();
        var fileTypes = new Array("docx", "doc", "xls", "pdf", "rar", "zip", "gif", "jpg", "png", "wbmp", "xlsx"); //定義可支援的檔案型別陣列
        var fileTypeFlag = "0";
        var newFileName = filename.split('.');
        newFileName = newFileName[newFileName.length - 1];
        for (var i = 0; i < fileTypes.length; i++) {
            if (fileTypes[i] == newFileName) {
                fileTypeFlag = "1";
            }
        }
        if (fileTypeFlag == "0") {
            $a("Manuscript attachments must be gif, jpg, png, wbmp, docx, doc, xls, xlsx, pdf or rar, zip format!");
            return false;
        }
        $("#txtfilename").html("Selected : " + filename);

    });
    function checkUser() {
        var fln = $("#txtfilename").html();
        var b = "";
        if (fln == "") { b += "<p>Please upload drawings</p>" }
        if (b.length > 0) {
            $a(b);
            return false;
        } else {
            showProc($("#upload"))
            return true;
        }
    }

    $(function () {
        $("#fileForm").ajaxForm({
            //定義返回JSON資料,還包括xml和script格式
            dataType: 'xml',
            beforeSend: function () {
                return checkUser(); //表單提交前做表單驗證  在這裡做提交判斷並沒有用 returm false還是會提交,要放在<form>標籤裡面才可以

            },
            success: function (data) {
                //提交成功後呼叫
                var k = gav(data, "state");
                var j = gav(data, "msg");

                if (k == "1") {
                    $a(j, 1);
                    clearTable();
                } else if (k == "0") {
                    $a(j);
                } else {
                    $a(data);
                }
                showProc($("#upload"), false)
                //$(".loading").hide();
                clearTable();
            },
            error: function (data) {   //提交失敗
                $a("Sorry, submit failed, please try again later.");
                showProc($("#upload"), false);
            }
        });
    });

    function clearTable() {
        $("#txtfilename").html("");
        $("#uploadedfile").val(""); 
    }

</script>

Ajax.ashx程式碼:

public void ProcessRequest(HttpContext context)
        {
            //操作
            string action = context.Request.QueryString["action"];

            //檢查來源
            if (!ComUtls.CheckPostSource())
            {
                context.Response.Write(ORes.Error.SuspiciousOfPostingSourceAndBeIgnored);
                return;
            }

            /****************************************
             * 加快方法呼叫響應速度,所有方法和屬性儘量以靜態的形式實現
             ***************************************/

            switch (action)
            { 

                    case "IndexSendLeaveword01": IndexSendLeaveword01(); break;

             }
        }

       /// <summary>
        /// 提交圖片
        /// </summary>
        private static void IndexSendLeaveword01()
        {
            // 獲取引數
            string upfile = GF("uploadedfile");

            string filetitle = "";
            //安全檢查
            **省略**

            string filiepath = "";
            HttpPostedFile imgFile = HttpContext.Current.Request.Files["uploadedfile"];
            if (imgFile != null)
            {
                String fileName = imgFile.FileName;
                String fileExt = System.IO.Path.GetExtension(fileName).ToLower();
                if (imgFile.InputStream == null || imgFile.InputStream.Length > 5 * 1024 * 1024)
                {
                    WriteState(0, "Upload file size limit.");
                    return;
                }
                string gs = "gif,jpg,png,docx,doc,xls,txt,pdf,rar,zip,ppt,xlsx";
                if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(gs.Split(','), fileExt.Substring(1).ToLower()) == -1)
                {
                    WriteState(0, "Upload file extension is not allowed.\n Only allow" + gs + "format。");
                    return;
                }
                string path = "/uploadfiles/temporary/";
                String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", System.Globalization.DateTimeFormatInfo.InvariantInfo) + fileExt;
                try
                {
                    filiepath = path + newFileName;
                    filetitle = newFileName;
                    string save = NSW.Utls.IOUtls.GetMapPath(path);
                    if (!System.IO.Directory.Exists(save))
                    {
                        System.IO.Directory.CreateDirectory(save);
                    }
                    imgFile.SaveAs(System.IO.Path.Combine(save, newFileName));
                }
                catch (Exception ex)
                {
                    WriteState(0, ex.ToString());
                    Log.Error(ex);
                    return;
                }
            }
            else
            {
                WriteState(0, "Please select the file you want to upload.");
                return;
            }

           //填充實體
            tbTBAA nobj = new tbTBAA();
            nobj.filemane= filiepath;//上傳檔案地址

           //儲存到資料庫
            int rowsAffected = DbSession.Default.Save<tbTBAA>(nobj);
            //顯示提示
            if (rowsAffected > 0)
            {
                string msg = "Thank you for uploading the design draft, we will contact you as soon as possible.";
                WriteState(1, msg);
            }
            else
            {
                WriteState(0, "Sorry, submit failed, please try again later.");
            }

}

       /// <summary>
        /// 獲取表單值Request.Form,獲取失敗則返回 string.Empty
        /// </summary>
        /// <param name="paraName">引數名</param>
        /// <returns>引數值</returns>
        private static string GF(string paraName)
        {
            string val = HttpContext.Current.Request.Form[paraName];
            if (val == null) { return ""; }
            if (Regex.IsMatch(val, StrRegex))
            {
                HttpContext.Current.Response.Write("The parameters you submitted are not valid!");
                HttpContext.Current.Response.End();
                return "";
            }
            else
            {
                return val == null ? string.Empty : val.Trim();
            }
        }

        /// <summary>
        /// 輸出狀態值與訊息
        /// </summary>
        /// <param name="state">狀態值</param>
        /// <param name="msg">訊息</param>
        protected static void WriteState(int state, string msg)
        {
            KeyValuePair<string, string> node = new KeyValuePair<string, string>("state", state.ToString());
            KeyValuePair<string, string> node2 = new KeyValuePair<string, string>("msg", msg);
            WriteXml(node, node2);

        }

css樣式


.up_com .upbtn{ position:relative;margin:15px 0 ; text-align:center;}
.up_com .pc{ width:211px; height:70px; line-height:70px; display:block;padding:29px 49px; text-align:center;margin:30px auto 30px; border: 1px solid #ebebeb;  box-shadow: 0 0 5px #ccc; }
.up_com .pc img{ width:70px; float:right; display:block; }
.up_com .pc a{ display:block;}
.up_com .pc .btn{font-size:16px;color:#333; line-height:70px; display:block; height:70px; float:left;}
.up_com #uploadedfile{filter:alpha(opacity=0);  -moz-opacity:0; -khtml-opacity:0;opacity: 0;width:325px; height:150px; position:absolute; top:0; left:50%;z-index:2; cursor:pointer;margin-left: -162px; }
.up_com #txtfilename{ font-size:14px; color:#333;}
.up_com .zsk7{width:200px; height:39px; line-height:39px; font-size:14px; font-weight:bold; color:#FFF; background:#6a6a6a url("Img/Index/up.png") no-repeat 30px center; border:0px;box-shadow: 2px 2px 2px 0 #a1a1a1; }


相關推薦

forminput type="file"檔案提交判斷

1、用/jquery.form.js上傳檔案,提交前判斷是否選擇了檔案(之前很糾結判斷問題,寫在beforeSend裡面不管什麼情況都會提交) 2、用ajax接收資訊 3、優化提交按鈕樣式 HTML頁面程式碼: <script src="/JS/jquery.fo

使用VUE腳手架+HTML5 input type = file 視頻

設置 視頻 通過 分享 video 並且 http 上傳 屬性 上傳視頻思路 HTML:1. 在這裏首先會用到html5標簽 video 音頻/視頻2. input type = file CSS 給一些樣式 *******JS

9.16 基於form的文件實現 ContextType

請求 表單上傳 服務 .com 鍵值 encode text pos tex 基於form表單傳遞普通鍵值對的方式傳遞數據: enctype="application/x-ww-form-urlencoded" 基於form表單上傳文件 傳遞數據,非鍵值對: enct

input[type=file]文件格式判斷、文件大小、成功後操作

type=file *** chang change 文件 == asd 使用 jpg var isUploadImg = false; //在input file內容改變的時候觸發事件******************上傳圖片

input type = file圖片限制大小、型別判斷、畫素判斷

在專案中經常用到input標籤來上傳檔案,而這些檔案通常是圖片檔案。圖片有很多格式我們只需要其中的幾種,就需要對使用者上傳的檔案進行驗證,在HTML5中有一個新的屬性:accept檔案型別限制。但是通常我們會用javascript或jQuery編寫方法進行驗證圖片的大小限制、型別判斷、畫素判

Ajax對Form圖片的區域性

首先引入jquery.form.js 1.建立一個form表單(("~/Content/productPic/")是儲存圖片的路徑) @using(Html.BeginForm("UploadIco

input type=file 圖片預覽 親測支援 ie8 chrome ff android及ios瀏覽器將網上的版本整合一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

inputfile檔案

1、去除input型別為file上傳檔案時預設樣式和預設”選擇檔案”等; 2、壓縮要上傳的圖片 3、隱藏上傳按鈕, 手動觸發 實現思路 隱藏選擇圖片的input, 點選顯示圖片觸發input

使用type=file 檔案時2007後各文件如docx需配置的accept屬性值

Extension MIME Type .xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xltx application/vnd.openxmlformats-offi

C# 檔案防止記憶體溢位

public static string MyUploader(string strFileToUpload, string strUrl,Action<double,double> uploading) { string strFileF

hadoop生態系統學習之路java實現檔案本地或ftp至hdfs

在上一篇博文中,我們講了如何編寫、執行、測試一個MR,但是hdfs上的檔案是手動執行命令從本地linux上傳至hdfs的。在真實的執行環境中,我們不可能每次手動執行命令上傳的,這樣太過繁瑣。那麼,我們可以使用hdfs提供的java api實現檔案上傳至hdfs,

form提交方式圖片到伺服器

springMVC為檔案上傳提供了直接的支援,這種支援是通過MultipartResolver實現的,實現類為CommonsMultipartResovler. 依賴:commons-fileupload-1.2.jar     commons-io-1.

Springform實現PUT、DELETE提交

reason inpu data 瀏覽器 請求方式 很多 work 部分 不支持 在REST服務中必不可少的需要PUT、DELETE提交,但是目前很多的遊覽器並不支持。所以在使用REST前需要進行一些額外的處理。 具體解決方案如下: 1,先添加一個filter。這個fi

使用form同時實現檔案提交文字資料

使用form表單同時實現上傳檔案和提交文字資料,此示例中在後臺將檔案上傳到阿里的oss儲存伺服器中 申請oss相關賬號: endpoint = "http://oss-cn-qingdao.aliyuncs.com"; accessKeyId = "key"; accessKeySecret = "secr

[寫著玩]理解multipart/form-data,構造http實現android圖片

關於multipart/form-data,可參考https://blog.csdn.net/zshake/article/details/77985757 客戶端  引數解釋,上傳主方法 private void submit() { Map<String, Obj

form input hidden 提交框架angular js

form表單提交,一些常用屬性。 method 有post、get等方式,action 是後臺介面地址, 1、這裡想要總結的是使用jsp頁面,input型別是hidden,給後臺傳值從而跳轉頁面,在另外一個頁面接收值時需要用到C標籤。 <%@ taglib uri="

input type=''file''美化 及 檔案img src顯示問題

                                                                                         原始介面        

使用form檔案

今天在專案中要寫一個上傳檔案的功能,使用jsp中的form表單的形式完成。 首先新建一個jsp,使用最原始的form表單來完成。 jsp中的程式碼如下,很簡單: <form method="post" action="<%=ermDomainUrl %>

form input輸入框及屬性

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>form表單</title> </head> <

JS 將form檔案 一起提交

前提 需要引入jquery(不然無法使用$.ajax) //js function add(){ var formData = new FormData(document.querySelector("form"));//獲取form值