0

今日、私はドラッグ アンド ドロップとファイル API を使用するサムネイル アップ ローダーを作成しようとしています。

かなり遠くまで行った気がします。しかし、画像ファイルのソースとして提供されている 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>
4

1 に答える 1

0

コールバックを設定するのではなく、FileReader のonloadendハンドラーを戻り値に設定して、ecent を渡します。handleReaderLoadEnd()代わりに、次のことが必要です。

reader.onloadend = handleReaderLoadEnd;

....

function handleReaderLoadEnd(e) {
  $("#thumbnailPreview").empty().prepend('<img id="thumbnailPreviewImage">');
  $("#thumbnailPreviewImage").attr({src: e.target.result});
}
于 2011-09-04T02:30:01.610 に答える