加载用户在网页上选择的图像

Question

我有一张表格。 为简单起见，表单中唯一的元素是文件上传：

<form name="MyForm" action="upload_file.php" enctype="multipart/form-data" method="post">
    <input type="file" name="file" id="file" size="40"> 
    <button type="button" onclick="draw()">Refresh</button>
    <input type="submit" name="upload" value="Upload"> 
</form>

在upload_file.php中，我以通常的方式检索参数。

在我的网页上有一个默认图像

<img src="Images/default_icon.png" width="70px" height="70px"/>

我想用用户从“选择文件”对话框中选择的图像替换此图像，并且（我想这是必要的）按下“刷新”按钮。 用户可以根据需要上传任意数量的文件，当他最终对图像感到满意时（当然只能看到上次上传的内容），他按下上传按钮，将他带到下一个网页并将图像上传到服务器。

我对网络编程知之甚少，但我想我知道我必须将图像上传到专用文件夹，因为我无法检索并使用客户端机器上的图像路径。 然后我可以从服务器下载图像并加载它像这样：

$url = '/upload/'.$_FILES["file"]["name"]; ///upload/icon.jpg

和

<img src="<?php echo $url; ?>" width="70px" height="70px"/>

请帮助我，或者将我重定向到一个体面的教程。 关于这在实践中是如何工作的解释也是值得赞赏的。

谢谢

Answer 1

我想你需要这样的东西：

http://blueimp.github.com/jQuery-File-Upload/

Answer 2

I have done this file uploading using iframe and form.
1>You need to have a form which includes input type as file and set the method as post of the form and set the target of the form to the iframe.
2> Set the src of iframe to the server side page where you need to upload the image.

Below is the html :-

<form id="fm1" method="post" enctype="multipart/form-data" target="ifrm">
<input type='file' id='file' name='image'/>
</form>

<iframe name='ifrm' style='display:none;' id='ifrm1' src='./CreateEvents.aspx'></iframe>


Once you sumbit the form to this iframe it automatically get posted to your server side page from where you can get the image convert it into bytes and upload to server or do any thing else.

Answer 3

我讨厌回答我的问题，但我设法做到了，而没有实际上传图像到服务器。 我不知道这是可能的，这就是为什么我写的用户可以上传他想要的多个文件，当他最终对图像感到满意时（当然只能看到上次上传的文件）他按下上传按钮将他带到下一个网页并将图像上传到服务器。 。 为什么用户上传更多文件，直到找到最有吸引力的文件，只要它足够一个一个地从计算机中选择它们并上传他认为最合适的文件:)

HTML：

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

使用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);
    }

}​