jquery input[type=“file“拖拽上传/选择文件上传

<div class="form-card">
        <ul class="append_list">
          <!-- <li><span>×</span><img src="images/event4.png"/></li>-->
        </ul>
        <div class="upload_drag_area" id="fileDragArea">
            <div class="filePicker">
              <p class="fileicon"></p>
              <p class="filebtns">拖拽图片到这里，或 
                <span class="andArea">
                  <i>点此添加</i>
                  <input id="fileImage" type="file" accept=".jpg, .jpeg, .png" multiple/>
                </span>
              </p>  
              <p class="filetips">允许上传最多20张图片（JPG/PNG等格式），单张大小不超5MB</p> 
            </div>            
        </div> 
        <div class="upload-sub">
          <button type="reset" class="resbtn">清空重输</button>
          <button type="button" class="subbtn">确认上传</button>
        </div>
      </div>复制

$(document).ready(function() { 
  //点击上传
  $('input[type="file"]').change(function(e){
    var files = e.target.files;
    uploadBase64(files);    
  });
  //删除
  $(".append_list").on("click","li span",function(){
    $(this).parent('li').remove();
    var lis=$(".append_list").find('li').length;
    if(lis==0){
      $('.filetips').html('允许上传最多20张图片（JPG/PNG等格式），单张大小不超5MB');
    }else{
      $('.filetips').html('已选'+lis+'张，还可选'+(20-lis)+'张');
    }
  });
 
  //拖拽上传
  var dropZone = $('#fileDragArea');
  // 初始化拖拽区域
  dropZone.on('dragover', function(e) {
      e.preventDefault();
      $(this).addClass('upload_drag_hover');
  });
  dropZone.on('dragleave', function(e) {
      e.preventDefault();
      $(this).removeClass('upload_drag_hover');
  });
  dropZone.on('drop', function(e) {
    e.preventDefault();
    $(this).removeClass('upload_drag_hover');    
    var files = e.originalEvent.dataTransfer.files;
    uploadBase64(files);  
  });
 
 
  $('button[type="reset"]').click(function(e){
    $(".append_list").empty();  
  });  
});
 
 
//文件上传
function uploadBase64(files) {   
  if (files.length > 0) {
    for (var i = 0; i < files.length; i++) {
      if(!/image\/\w+/.test(files[i].type)){ 
        alert('上传文件类型必须是 jpg, jpeg, png格式！');
        return false; 
      }else{
        var reader = new FileReader();
        reader.onload = function () {
          var html='<li><span>×</span><img src="'+this.result+'"/></li>'
          $('.append_list').append(html)
        }
        reader.readAsDataURL(files[i]);
      }      
    }
    $('.filetips').html('已选'+files.length+'张，还可选'+(20-files.length)+'张');
  }
  // 处理待上传的文件
  /*$.ajax({
      url: 'upload.php',
      data: {
          fileData: data,
          fileName: fileName,
          fileSize: fileSize
      },
      type: 'POST',
      success: function() {
          console.log('文件上传成功！');
      }
  });*/
}复制

本文使用原生html5自带dragover,dragleave,drop方法，实现拖拽显示文件效果，不依赖插件。