js調用js文件上傳
⑴ 使用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)]
更多用法可以 參考官網
⑵ 只得到文件路徑怎麼用js上傳
看來是沒人願意回答你這個問題了。我告訴你吧。
瀏覽器是不允許js上傳文件的，如果可以，惡意代碼會掃描電腦把敏感文件都上傳了，以後誰還敢上網？
所以上傳文件只能用<input type="file"/>
至於aspx裡面如何使用，這是你自己的事。學習要學精，用法差別不大。
⑶ 怎樣用JS控制文件上傳時FILE控制項內默認的文件類型
有兩種方式，
1、用fileupload控制項在後台判斷
FileUpload1.FileContent.Length判斷大小，
System.IO.Path.GetExtension(FileUpload1.FileName)獲取文件後綴
2、用jquery上傳控制項，可以直接判斷類型和大小
另外js也可以在前台判斷文件類型，但不能獲取文件大小，需要引用插件
⑷ 使用js向伺服器上傳文件
（1）js無法向網站伺服器傳送文件只能用FTP傳送文件，（2）是動態網站要用js代碼函數與伺服器資料庫代碼建立連接函數。對應資料庫，數據，相應單位，通過指定路徑傳輸倒是制定數據單位。例如照片imag數據單位格式標注照片。通過編輯代碼任意網路客戶端都可上傳到資料庫imag格式單位標注中.相片.