带有样式的输入（类型=文件），单击时使用jquery .change事件提交，以读取所选文件

Question

我已经调试了很长一段时间，但无济于事。

在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);
});

Answer 1

糟糕，我刚刚找到了自己问题的答案。 显然，jQuery代码没有问题，问题在于标记。

默认情况下，按钮标签将页面提交到服务器，并且由于输入type = file在按钮标签中包含，因此它将提交页面。

为了解决这个问题，我做到了。

<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>

希望这也对可能遇到相同问题的其他人有所帮助。