jquery拖拽上传,并预览图片的具体方法及实例推荐 亲测 原创 收藏

文章标签: 图片特效
  • :
  • 04-28 23:28
  • :
  • 61次
  • :
  • 0条
  • 0赞

简介本文主要讲在用jquery来实现HTML5的拖拽上传时的具体方法代码和在上传前可以预览本地图片的方法,及完整的在线实例演示。l

关于HTML5的拖拽上传,网上有很多的实例和代码,但是这些实例和代码大多都是用JS来写的,但对于我们的网页里已经引入了jquery的时候,在使用这些使用JS编写的代码,就会感觉“多此一举”,下面站长就分享给大家,如何用纯粹的jquery来实现HTML5里的拖拽上传,及本地图片预览的功能。

可以先看站长准备的在线实例演示:

jquery拖拽上传时图片预览
本文首发:爱jquery www.aijquery.cn

下面是具体的代码,用jquery来写的,比用js来写的要简单的多:

<script language="JavaScript">
var Drag=function(){  
    var $this=$("#aijquery")  
    $this.on("dragenter",function(e){$this.addClass("drag_hover");});  
    $this.on("dragleave",function(e){$this.removeClass("drag_hover");});  
    $this.on("drop",function(e){    
        var files = e.originalEvent.dataTransfer.files;    
        $this.removeClass("drag_hover");    
        if(files.length != 0){ShowFile(files);};    
        e.preventDefault();  
    });  
    $this.on("dragover",function(e){e.preventDefault();});
}
var ShowFile=function(files){    
    var file=files[0];	
    var reader = new FileReader();    
    var showimg=new Image();    
    reader.onload = function(e) {      
        var UploadData=file; //要上传的图片数据      
        var UpFileType=file.type.match(/^image\/([a-z]+)$/i)[1]; //要上传的文件类型      
        $("#aijquery").html('<img src="'+e.target.result+'" style="max-width:100%;max-height:100%">');    
    };    
    reader.readAsDataURL(file);
};
Drag();
</script>

本篇文章只是对jquery里的和拖拽操作相关的一篇很简单的文章,但却是我们在实现上传时经常要用到的,希望能帮助到所有看到这篇文章的朋友们!



您正在找的文章可能是:
热点文章
热点图文
最近更新
  • Copyright © aijquery.cn 爱jQuery-完全免费的jquery交流学习网站
  • 豫ICP备17037455号-1
  • 2018-11-15 15:14:11