在上传失败之前显示选择上传的图像

Question

我试图从硬盘驱动器中选择后显示图像，然后再将其发送到服务器（上传）。 我在该网站上找到了一个小代码，我复制粘贴了它，但是它不起作用（在演示页面上）。 我可以选择一个图像，它的名称显示在“选择文件”按钮的右侧，但是既不显示图像也不显示尺寸。 我正在拔头发。

整个代码：

<!DOCTYPE html>  <!-- Using margin:auto will not work in IE8, unless a !DOCTYPE is declared. -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="design3.css" rel="stylesheet" type="text/css"/>

    <script src="jquery-1.8.3.min.js"></script>

<script language="JavaScript">

// Handle file while select a new file
$('#file').change(function () {
    $('#img_size').val((this.files[0].size) / 1000000);
    handleFiles(this.files);
});


// handle files
function handleFiles(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
            continue;
        }
        var img = document.getElementById('fake_img');
       /* img.src = file;
        img.onload = function () {
        }; */
        var reader = new FileReader();
        reader.onload = (function (aImg) {
            return function (e) {
                aImg.src = e.target.result;
            };
        })(img);
        reader.readAsDataURL(file);
    }
}



function drawAd() 
{
    window.open('http://www.google.com');
}

</script>

</head>
<body> 

    <input type="file" id="file"/>
    <input type="text" id="img_size" />
    <img src="" id="fake_img" />

    <button type="button" onclick="drawAd()">Refresh</button>


</body>
</html>

在IE和Chrome中进行了测试。

Answer 1

在没有看到其余代码（表单的HTML）的情况下很难确定，但是可能发生的事情是在浏览器查看并解析HTML之前，代码正在运行。

将您的代码包装为jQuery“就绪”处理程序：

$(function() {
  // your code here
});

看看是否有帮助。 这行：

$('#file').change(function () {

为文件输入中的“ change”事件设置事件处理程序。 当运行时，如果没有浏览器知道以“ file”作为其“ id”的元素，那么您将不会得到任何错误，但将不会发生任何事情。 通过将代码延迟到浏览器看到您的整个文档（这是jQuery“ ready”包装器执行的操作），您可以使它得以找到“ file”输入。

在上传失败之前显示选择上传的图像

问题描述

1 个解决方案

解决方案1
0 已采纳 2012-12-30 17:45:31

在上传失败之前显示选择上传的图像

问题描述

1 个解决方案

解决方案1 0 已采纳 2012-12-30 17:45:31

解决方案1
0 已采纳 2012-12-30 17:45:31