htmljquery文件上傳
⑴ 如何實現Jquery的LigerUI文件上傳
實現Jquery的LigerUI文件上傳的實現方法：
1、在head標簽中加入js引用：
<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>
2、定義上傳表格：
<div id="AppendBill_Div" style="display:none;"> <%-- 上傳表單 --%>
<table style="height:100%;width:100%">
<tr style="height:40px">
<td style="width:20%">
圖標:
</td>
<td><input type="file" style="width:200px" id="fileupload" name="fileupload"/>
</td>
</tr>
</table>
3、編寫上傳的js邏輯
1、grid中添加項【存地址欄位】
{ display: "掃描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }
2、Form可添加項【存地址和彈出選擇框】
{ name: "AppendBillPath1", type: "hidden" },
{ display: "掃描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}}
$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1)
3、事件
// #region ======================================= 【上傳掃描件窗口】
var AppendBillPathDetail = null;
function f_selectAppendBillPath_1() {
var imageurl = $("#AppendBill").val();
var AppendBill_Id = $("#AppendBill").val(); // 單號
if (imageurl.length == 0) {
LG.showError("您沒有輸入單號，請輸入隨單號！");
return;
}
if (AppendBillPathDetail) {
AppendBillPathDetail.show();
}else {
AppendBillPathDetail = $.ligerDialog.open({
target: $("#AppendBill_Div"), title: '添加圖標',
width: 360, height: 170, top: 170, left: 280, // 彈出窗口大小
buttons: [
{ text: '上傳', onclick: function () { AppendBillPath_save(); } },
{ text: '取消', onclick: function () { AppendBillPathDetail.hide(); } }
]
});
}
}
⑵ 如何實現Jquery的LigerUI文件上傳
一 在Head中加入
<script src= /lib/js/ajaxfileupload js type=text/javascript></script> <script src= /lib/js/ligerui expand js type=text/javascript></script>
二 Html中的Div代碼
<div id="AppendBill_Div" > <% 上傳 單 %> <table > <歲猛tr > <td > 圖標: </td> <td><input type=file id="fileupload" name=fileupload/> </td> </tr> </table> </div>
三 Js中 寫的是關鍵部分 會LigerUI的朋友 你懂得
grid中添加乎模橋項【存地址欄位】 { display: "掃描件" name: "AppendBillPath" width: type: "text" align: "left" } Form可添加項【存地址和彈出選擇框】
{ name: "AppendBillPath " type: "hidden" } // 上傳 【 】 { display: "掃描件" name: "AppendBillPath" boboxName: "AppendBillPath " newline: true labelWidth: width: space: type: "select" options: {}} // 上傳 【 】 $ ligerui get("AppendBillPath ") set( onBeforeOpen f_selectAppendBillPath_ ) // 【掃描件】 // 上傳 【 】 事件
// #region ======================================= 【上傳掃描件窗口】 // 上傳 【 】
var AppendBillPathDetail = null; function f_selectAppendBillPath_ () { var imageurl = $("#AppendBill") val(); var AppendBill_Id = $("#AppendBill") val(); // 單號 if (imageurl length == ) { LG showError("您沒有輸入單號 請輸入隨單號！"); return; }
if (AppendBillPathDetail) { AppendBillPathDetail show();
} else {
AppendBillPathDetail = $ ligerDialog open({ target: $("#AppendBill_Div") title: 添加圖標 width: height: top: left: // 彈出窗口大小 buttons: [ { text: 上傳 onclick: function () { AppendBillPath_save(); } } { text: 取消 onclick: function () { AppendBillPathDetail hide(); } } ] }); } }
function AppendBillPath_save() {
var imgurl = $("#fileupload") val(); // var filehelpcode = $("#filehelpcode") val();
var extend = imgurl substring(imgurl lastIndexOf(" ") imgurl length); extend = extend toLowerCase(); if (extend == " jpg" || extend == " jpeg" || extend == " png" || extend == " gif" || extend == " bmp") { } else {
LG showError("請上傳jpg jpep png gif bmp格式碼簡的圖片文件");
return; } var imageurl = $("#AppendBill") val(); // extend alert(imageurl);
$ ajaxFileUpload({ url: " /handle/ImageUpload aspx?imageurl=" + imageurl // 上傳 【 】 aspx文件 secureuri: false fileElementId: "fileupload" //Input file id
dataType: "text" success: function (data status) {
// // 保存路徑
// $("#AppendBillPath ") val(Data); LG tip(data); f_reload(); } error: function (data status e) { LG showError(data);
} });
}
// #endregion 四 後台cs 寫一句關鍵的 可以返回參數 前台提示
lishixin/Article/program/Java/JSP/201311/20623
⑶ 用jquery如何實現提交表單點擊提交之後顯示正在上傳中，之後顯示上傳成功的效果
需要准備的材料分別有：電腦、html編輯器、瀏覽器。
1、首先，打開html編輯器，新建html文件，例如：index.html，並引入jquery。
⑷ 使用jquery.form.js實現文件上傳及進度條前端代碼
ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這里用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。
需要解釋下我的結構， #upload-input-file 的input標簽是真實的文件上傳按鈕，包裹form標簽後可以實現上傳功能， #upload-input-btn 的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。
去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]
將上傳事件綁定在file的input裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[圖片上傳失敗...(image-3d6ae0-1548557865446)]
[圖片上傳失敗...(image-9f0adf-1548557865446)]
更多用法可以 參考官網