type=file的change事件只能執行一次的問題及解決方案執行個體

來源:互聯網
上載者:User
    最近幫朋友做個項目中遇到了type=file change事件只能執行一次的問題,度娘了一下,發現提供了各種解決方案,所以決定記錄一下我的思考方向和最終解決方式。

    起初幫朋友做個項目,項目中遇到上傳檔案,沒想太多,代碼就敲了起來,尼瑪,上傳做好啦,興沖沖,一測,ei,怎麼回事,怎麼不能上傳了,程式員的各種抓狂捉急啊,開始度娘找解決方案,找來找去,冷靜下來,自己想瞭解決方案;

    蛋疼的<input type='file' />設計,不管檔案上傳成功與否,已添加的檔案已經被記錄了,所以不會再執行change事件,大概原因知道了,動手做吧,如果我能清空記錄,事件不就能觸發了嗎,嘗試了一下,尼瑪,沒成功。繼續找方法,如果我替換了<input type='file' />標籤,然後重新綁定change事件會怎麼,動手試了一下,成功了,下面貼上代碼:

<form action="/api/Index/Browse" enctype="multipart/form-data" id="form_Upload" method="post">
  <input id="fileUpload" type="file" name="file" style="display:none">

</form>

$('input[id=fileUpload]').click();

var count = 0;
$('input[id=fileUpload]').unbind().change(function () {
$('#form_Upload').ajaxSubmit(options);

});

var options = {
success: function (data) {
//$scope.orderInfo = eval(data);
$scope.$apply(function () {
$scope.orderInfo = eval(data);

//start 為避免type=file控制項的change()只能執行一次,更換控制項,重新綁定事件
count++;
$("#fileUpload").replaceWith('<input type="file" id="fileUpload" name="file" style="display:none;" title="' + count + '"/>');
$('#fileUpload').on('change', function () {

$('#form_Upload').ajaxSubmit(options);
});
//end

$http.post(url, params).success(function (data) {
  do something
}, function () {
  do something

});
});
}
};

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.