炫意html5
最早CSS3和HTML5移动技术网站之一

HTML5拖拽上传图片,可以多张同时上传

 

HTML5拖拽上传图片,可以多张同时上传

 

在HTML5中,使用DataTransfer对象中提供的方法,可以实现浏览器与其他应用程序之间文件的拖动。虽然HTML4之前的版本也支持拖放数据的操作,但仅局限于浏览器中,不支持浏览器之外的数据。

今天就举个拖放上传图片的例子吧。

Html部分:

<div class="content">
    <form>
        <div class="drag" ondrop = "dropFile(event)" ondragenter = "return false" ondragover = "return false">
        <span class="spn-img" id="spn-img"></span>
        </div>
    </form>
</div>

Css部分:

* {margin: 0; padding: 0;}
.content {margin:50px auto; width: 600px; border: 1px solid #ccc; padding: 20px;}
.content .drag {width: 596px; min-height: 300px; background: url(bg.png) no-repeat center center; border: 2px dashed #666;}
.spn-img img {max-width: 596px;}

此时效果如下:

 

 

Js部分:

var fileUploadPreview = function (aFile) {
    if (typeof FileReader == "undefined") {
        alert("浏览器不支持");
    }
    var i;
    for (i = 0; i < aFile.length; i++) {
        var tmp = aFile[i];
        var reader = new FileReader();
        reader.readAsDataURL(tmp);
        reader.onload = (function (f) {
            return function (e) {
                document.getElementById("spn-img").innerHTML += "<img src=""+e.target.result+"" title=""+f.name+"">";
            }
        })(tmp)
    }
}
       
var dropFile = function (e) {
    fileUploadPreview(e.dataTransfer.files);
    e.stopPropagation();
    e.preventDefault();
}

Ok,以上是全部代码,然后我们就可以把图片拖放到虚线区域了,然后会有图片的预览效果,并且支持多张同时上传。效果如下图:

 

 

图片过宽时会被自动缩小的虚线框宽度,虚线框高度自动。

下面是Demo和源码下载链接:

Demo   Download

 

转载:http://beyondweb.cn/article_detail.php?id=133

炫意HTML5 » HTML5拖拽上传图片,可以多张同时上传

CSS3教程HTML5教程