html input file onchange事件失靈的解決方法
阿新 • • 發佈：2019-02-11
最近寫了一個關於input file的onchange事件，在頁面點選上傳時需要提交後臺，然後再把圖片顯示出來，發現onchange事件在第一次點選的時候是執行的，但是第二次第三次事件就失靈了，後來是利用remove將本元素移除，再通過生成相同元素的方法來解決onchange事件的失靈事件。遇到了並解決了，所以寫在這裡，供大家參考。
HTML程式碼：
[HTML] 純文字檢視 複製程式碼 ?
對應的js程式碼： [JavaScript] 純文字檢視 複製程式碼 ?
HTML程式碼：
[HTML] 純文字檢視 複製程式碼 ?
| 01 02 03 |
<div
id="myupload">
<input
type="file"
id="uploadfile"
name="uploadfile"
accept="image/gif,
image/jpeg, image/png"/>
</div>
|
對應的js程式碼： [JavaScript] 純文字檢視 複製程式碼 ?
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$(document).ready(function
() {
$("#uploadfile").change(function
() {
createUploadFile();});
});
function
createUploadFile() {
$.ajaxFileUpload
(
{
url:
'ProcessImage.ashx?act=load',
//用於檔案上傳的伺服器端請求地址
secureuri:
false,
//是否需要安全協議，一般設定為false
fileElementId:
'uploadfile',
//檔案上傳域的ID
dataType:
'json',
//返回值型別
一般設定為json
success:
function
(data, status) //伺服器成功響應處理函式
{
if
(typeof
(data) != 'undefined')
{
createCropzoom(data.url+"?"+Math.random());
}
},
error:
function
(data, status, e)//伺服器響應失敗處理函式
{
alert(e);
}
}
);
$("#uploadfile").remove();
|