風格的輸入（類型=文件）提交後點擊jQuery的.change事件閱讀選定的文件

我一直在調試這已經相當一段時間了，但無濟於事。風格的輸入（類型=文件）提交後點擊jQuery的.change事件閱讀選定的文件

在Google chrome上工作得很好，但在其他瀏覽器上無法正常工作。在其他的瀏覽器，在點擊「添加附件」按鈕，頁面提交（W/C顯然是不應該發生，因爲文件上傳應該發生異步）

HTML代碼：

<form id="upload-form" method="POST" enctype="multipart/form-data" class=""> 
    <button class="btn btn-outline btn-default btn-sm btn-file"> 
     <span class="glyphicon glyphicon-plus"></span> Add Attachment <input id="select-file" type="file" name="file[]" multiple /> 
    </button> 
    <button id="upload-file" class="btn btn-outline btn-default btn-sm"> 
     <span class="glyphicon glyphicon-upload"></span> Upload 
    </button> 
</form>

jQuery代碼：

var ajaxRequest = function(type, url, data){ 
$.ajax({ 
     type: type, 
     url: url, 
     xhr: function(){ 
      var myXhr = $.ajaxSettings.xhr(); 
      if(myXhr.upload){ 
       myXhr.upload.addEventListener('progress', progressHandlingFunction, false); 
      } 
      return myXhr; 
     }, 
     data: data, 
     success: function(data, status){ 
      if(data.status == true){ 
       $("#upload-result").addClass('font-green') 
       $("#upload-result").html(data.text); 
       setTimeout(function(){removeUploadPreviewDOM();}, 1500); 
       setTimeout(function(){location.reload(true);}, 500); 
      }else{ 
       $("#upload-result").addClass('font-red') 
       $("#upload-result").html(data.text); 
       $("#upload-form").trigger('reset'); 
       removeUploadPreviewDOM(); 
      } 
      //setTimeout(function(){location.reload(true);}, 1500); 
     }, 
     error: function(xhr, status, err){ 
      alert(status + ': ' + err); 
     }, 
     cache: false, 
     contentType: false, 
     processData: false 
}); 

$("#select-file").change(function(){ 
    var files = this.files; 
    Files = files; 
    for(i=0; i<files.length; i++){ 
     readFile(files[i]); 
    } 
}); 

function readFile(file) { 
    if(window.FileReader){ 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     var oPreviewDiv = $('#upload-preview'); 
     var aFile = [e.target.result, file.name, (file.size/1024), file.type]; 
     var oFileUploadBox = singleFileInfoBox(aFile); 
     oPreviewDiv.append(oFileUploadBox); 
    }; 
    reader.readAsDataURL(file); 
    } 
} 

$("#upload-file").click(function(e){ 
    e.preventDefault(); 
    var currUrl = window.location.toString(); 
    var ticketno = currUrl.substr(currUrl.lastIndexOf("/")+1,12); 

    var type = 'POST'; 
    var url = sUrl + 'upload_file/' + ticketno; 
    var data = new FormData($("#upload-form")[0]); 

    //SHOW/CREATE PROGRESS BAR BEFORE AJAX REQUEST 
    generateProgressPreview(); 

    ajaxRequest(type, url, data); 
});

來源

2014-09-03 JCm

Ooopss ..我只是找到了答案，以我自己的問題。當然，jQuery代碼沒有問題，問題在於標記。

默認按鈕標籤，將頁面提交給服務器，並且由於輸入類型=文件在按鈕標籤中，它會提交頁面。

糾正我這樣做的問題。

<span class="btn btn-outline btn-default btn-sm btn-file"> 
    <span class="glyphicon glyphicon-plus"></span> Add Attachment <input id="select-file" type="file" name="file[]" multiple /> 
</span>

希望對他人也有幫助，可能會遇到同樣的問題。

來源

2014-09-03 06:45:24 JCm

風格的輸入（類型=文件）提交後點擊jQuery的.change事件閱讀選定的文件

回答

相關問題