[前台]---js重复上传一张图片两次,第二次失败的解决办法和思路
生活随笔
收集整理的這篇文章主要介紹了
[前台]---js重复上传一张图片两次,第二次失败的解决办法和思路
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
js重復上傳一張圖片兩次,第二次會失敗,解決辦法就是修改input的value值.
先上代碼:
<input style="display:none" type="file" id="aaa" onchange="newuploadImageForDetail(event)" accept="image/jpg, image/jpeg, image/gif, image/png">普通的寫法就是這樣,之所以第二次上傳同樣的圖片失敗,是因為這個onchange事件,onchange事件會在內容改變且失去焦點時觸發,而第二次上傳的圖片還是上一次的圖片的話,就不會觸發這個onchange事件,從而導致圖片上傳失敗.
詳細解決辦法:
上傳完修改這個input的value值,這樣就可以保證第二次上傳的圖片肯定會觸發onchange事件,如下:
總結:
雖然同時上傳兩張相同的圖片一般在邏輯上是不正確的,但這個方法也有有用的時候,
比如我的邏輯是:
1.上傳完圖片,將圖片異步保存在遠程的圖片服務器上,同時返回一個唯一的圖片名字,保存在其他標簽中,并隱藏起來
2.可以根據這個圖片返回的名字,拼接上固定的前綴,就可以在頁面看到圖片的縮略圖了
3.每個圖片的縮略圖有刪除事件,即可以刪除本地對應存名字的標簽中的這個圖片的值
4.這個時候這個方法的價值就體現出來了,如果用戶剛剛刪除完圖片a,再想重新上傳剛剛刪除的照片a,就會出現上面的問題,即上傳不成功,就可能會造成不好的用戶體驗
總結
以上是生活随笔為你收集整理的[前台]---js重复上传一张图片两次,第二次失败的解决办法和思路的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Objective-C复制解析
- 下一篇: CoreAnimation编程指南(一)