拖拽或点击上传(支持苹果safari浏览器)

<input type="file" value="上传">  拖拽或点击上传(在safari浏览器不支持拖拽),主要解决safari浏览器的拖拽问题

jsp页面

                    <input type="file" id="frontImg" name="myfiles"  style="display:none;">  
                      <div class="seam-upload" id="upload">
                          <img id="upload" src="${path }/image/product/seam-upload.png">
                          <h4 id="addproduct">点击添加产品</h4>
                      </div>

css美化拖拽或点击上传区域

.seam-upload {width: 200px; height: 300px; background: rgba(0,152,221,1); box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.44); border-radius: 6px; text-align: center; float: left; margin-right: 21px; margin-bottom: 50px;

}

seam-upload h4 { font-size: 18px; font-family: MicrosoftYaHeiLight; font-weight: 300; color: rgba(255,255,255,1);}

js功能实现

<script type="text/javascript">

//监听拖拽事件

document.addEventListener("drop",function(e){  //拖离   
    e.preventDefault();      
})  
document.addEventListener("dragleave",function(e){  //拖后放   
    e.preventDefault();      
})  
document.addEventListener("dragenter",function(e){  //拖进  
    e.preventDefault();      
})  
document.addEventListener("dragover",function(e){  //拖来拖去    
    e.preventDefault();      
})

/* 拖拽上传 */
     var box = document.getElementById('upload'); //拖拽区域     
     box.addEventListener("drop",function(e){           
         var fileList = e.dataTransfer.files; //获取文件对象    
         ajaxFileUpload(fileList);//将文件上传
     });

 /*点击转移,确保拖拽的文件和点击的文件是同一部分*/
     $("#upload").click(function(){
         return $("#frontImg").click();
    }); 

 $("#frontImg").on("change",function (e) {
           var e = e || window.event;
           //获取 文件 个数 取消的时候使用
           var fileList = e.target.files;
           if(files.length>0){
               // 获取文件名 并显示文件名
               ajaxFileUpload(fileList );
           }else{
               //清空文件名
               $("#frontImg").val("");
           }
        });

/*上传方法,根据需要上传*/

function ajaxFileUpload(obj) {

}

</script>