心血来潮想做照着网上个html5的拖曳上传，但不知道出了什么问题，图片不能预览请高手看下<html>
<head>
</head>
<body>
<h3>Choose file(s)</h3>
<p>
<input id="files-upload" type="file" multiple>
</p>
<p id="drop-area">
<span class="drop-instructions">or drag and drop files here</span>
<span class="drop-over">Drop files here!</span>
</p><ul id="file-list">
<li class="no-items">(no files uploaded yet)</li>
</ul>
<script language="javascript" type="text/javascript"><!--
(function () {
var filesUpload = document.getElementById("files-upload"),
dropArea = document.getElementById("drop-area"),
fileList = document.getElementById("file-list"); function uploadFile (file) {
var li = document.createElement("li"),
img,
reader；
if (typeof FileReader !== "undefined" && (/image/i).test(file.type)) {
img = document.createElement("img");
li.appendChild(img);
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
theImg.src = evt.target.result;
};
}(img));
reader.readAsDataURL(file);
} fileList.appendChild(li);
} function traverseFiles (files) {
if (typeof files !== "undefined") {
for (var i=0, l=files.length; i<l; i++) {
uploadFile(files[i]);
}
}
else {
fileList.innerHTML = "No support for the File API in this web browser";
}
} filesUpload.addEventListener("change", function () {
traverseFiles(this.files);
}, false); dropArea.addEventListener("dragleave", function (evt) {
var target = evt.target; if (target && target === dropArea) {
this.className = "";
}
evt.preventDefault();
evt.stopPropagation();
}, false); dropArea.addEventListener("dragenter", function (evt) {
this.className = "over";
evt.preventDefault();
evt.stopPropagation();
}, false); dropArea.addEventListener("dragover", function (evt) {
evt.preventDefault();
evt.stopPropagation();
}, false); dropArea.addEventListener("drop", function (evt) {
traverseFiles(evt.dataTransfer.files);
this.className = "";
evt.preventDefault();
evt.stopPropagation();
}, false);
})();
// --></script>
</body>
</html>FYI:是在chrome12 下测试的
<head>
</head>
<body>
<h3>Choose file(s)</h3>
<p>
<input id="files-upload" type="file" multiple>
</p>
<p id="drop-area">
<span class="drop-instructions">or drag and drop files here</span>
<span class="drop-over">Drop files here!</span>
</p><ul id="file-list">
<li class="no-items">(no files uploaded yet)</li>
</ul>
<script language="javascript" type="text/javascript"><!--
(function () {
var filesUpload = document.getElementById("files-upload"),
dropArea = document.getElementById("drop-area"),
fileList = document.getElementById("file-list"); function uploadFile (file) {
var li = document.createElement("li"),
img,
reader；
if (typeof FileReader !== "undefined" && (/image/i).test(file.type)) {
img = document.createElement("img");
li.appendChild(img);
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
theImg.src = evt.target.result;
};
}(img));
reader.readAsDataURL(file);
} fileList.appendChild(li);
} function traverseFiles (files) {
if (typeof files !== "undefined") {
for (var i=0, l=files.length; i<l; i++) {
uploadFile(files[i]);
}
}
else {
fileList.innerHTML = "No support for the File API in this web browser";
}
} filesUpload.addEventListener("change", function () {
traverseFiles(this.files);
}, false); dropArea.addEventListener("dragleave", function (evt) {
var target = evt.target; if (target && target === dropArea) {
this.className = "";
}
evt.preventDefault();
evt.stopPropagation();
}, false); dropArea.addEventListener("dragenter", function (evt) {
this.className = "over";
evt.preventDefault();
evt.stopPropagation();
}, false); dropArea.addEventListener("dragover", function (evt) {
evt.preventDefault();
evt.stopPropagation();
}, false); dropArea.addEventListener("drop", function (evt) {
traverseFiles(evt.dataTransfer.files);
this.className = "";
evt.preventDefault();
evt.stopPropagation();
}, false);
})();
// --></script>
</body>
</html>FYI:是在chrome12 下测试的
所以上边的代码只能在这两种浏览器版本里实现测试是否支持的代码如下，LZ可以试试看：
if ( typeof FileReader === 'undefined' ) {
alert( "您的浏览器还不支持" );
} else {
var reader = new FileReader();
}