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>

來源

2011-09-08 DanTonyBrown

該代碼適用於Chrome 15dev中的我：http://jsbin.com/owolek/edit#javascript,html。你使用的是什麼瀏覽器？另外，你是從Web服務器而不是'file：///'運行嗎？ – ebidel

重複這個http://stackoverflow.com/questions/7296801/html5-file-api-always-returns-datauri-of-object-file-what-am-i-doing-wrong –

您可以使用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支持該功能。

來源

2011-09-13 04:04:48

HTML5拖放/文件API縮略圖上傳不起作用

回答

相關問題