HTML5ææ¾/æ件API缩ç¥å¾ä¸ä¼ ä¸èµ·ä½ç¨
问题描述:
ä»å¤©æä¸ç´å¨è¯å¾å¶ä½ä¸ä¸ªä½¿ç¨ææ¾åæ件APIç缩ç¥å¾å è½½å¨ãHTML5ææ¾/æ件API缩ç¥å¾ä¸ä¼ ä¸èµ·ä½ç¨
æè§å¾æå·²ç»ç¸å½è¿äºãä½æ¯ï¼å¨æçå¾åæ件ALWAYSä¸æä¾çDataURIå°ä½ä¸º[ç®æ æ件]è¿åï¼å æ¤ä¸ä¼æ¾ç¤ºå¾åã
æä»ä¹å¸®å©ï¼
谢谢ã 丹尼
ï¼ä¸é¢æ¯æç代ç ï¼
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#thumbnailPreview
{
width:149px;
height:137px;
border:3px dashed #333;
border-radius:10px;
text-align:center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$("document").ready(function() {
if (!!FileReader)
{
$("#thumbnailPreview").append("<p>Drag image here to set as thumbnail</p>")
$("#thumbnailUploadBox").hide();
var thumbnailPreview = document.getElementById("thumbnailPreview")
// init event handlers
thumbnailPreview.addEventListener("dragenter", preventDefault, false);
thumbnailPreview.addEventListener("dragexit", preventDefault, false);
thumbnailPreview.addEventListener("dragover", preventDefault, false);
thumbnailPreview.addEventListener("drop", drop, false)
function preventDefault(evt)
{
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt)
{
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
var noOfFiles = files.length;
if (noOfFiles === 1)
{
handleImages(files);
}
else
{
alert("You appear to be attempting to upload more or less than 1 image. You can only have one thumbnail image. Please try again.");
}
}
function handleImages(files)
{
var file = files[0];
{
if(file.type.indexOf("image") == 0)
{
$("#thumbnailPreview").empty().append('<p>Working on it!</p><progress id="progressbar"></progress>');
var reader = new FileReader();
reader.onloadend = handleReaderLoadEnd;
reader.onprogress = handleReaderProgress;
reader.readAsDataURL(file);
}
else
{
alert("The file you dragged wasn't an image. Please drag another file before attempting to upload");
}
}
}
function handleReaderLoadEnd(e) {
$("#thumbnailPreview").empty().prepend('<img id="thumbnailPreviewImage">');
$("#thumbnailPreviewImage").attr({src: e.target.result});
}
function handleReaderProgress(evt)
{
if (evt.lengthComputable)
{
var loaded = (evt.loaded/evt.total);
$("#progressbar").attr({ value: loaded * 100 });
}
}
}
});
</script>
</head>
<body>
<form action="lighthouseMaker.php" enctype="application/x-www-form-urlencoded" method="post">
<div id="thumbnailPreview">
<p>Upload an Image 149 x 137px</p>
</div>
<div id="thumbnailUploadBox">
<input type="file" name="thumbnail">
</div>
</form>
</body>
</html>
答
æ¨å¯ä»¥ä½¿ç¨window.URL.createObjectURL/window.URL.revokeObjectURL
è·å¾URIçæ件对象ãè¿æ¯readAsDataURL
好ã
var img = document.createElement('img');
img.src = (window.URL || window.webkitURL || window.mozURL).createObjectURL(files[0]);
FirefoxåGoogle Chromeæ¯æ该åè½ã
该代ç éç¨äºChrome 15devä¸çæï¼http://jsbin.com/owolek/edit#javascript,htmlãä½ ä½¿ç¨çæ¯ä»ä¹æµè§å¨ï¼å¦å¤ï¼ä½ æ¯ä»Webæå¡å¨èä¸æ¯'fileï¼///'è¿è¡åï¼ â ebidel
éå¤è¿ä¸ªhttp://*.com/questions/7296801/html5-file-api-always-returns-datauri-of-object-file-what-am-i-doing-wrong â