用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"
<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; }
相關推薦
用form表單input 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
input為file上傳檔案
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.
Spring用form表單實現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="
使用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值