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

Load image selected by the user on webpage

本文关键字：选择 图像 用户 加载 网页      更新时间：2023-09-26

我有一个表单。为了简单起见，表单中唯一的元素是一个文件上传:

<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"/>

我想用用户从选择文件对话框中选择的图像替换此图像，并且(我想这是必要的)按下刷新按钮。用户可以上传任意多的文件，当他最终对图像满意时(当然只能看到最后上传的)，他按下上传按钮，将他带到下一个网页并将图像上传到服务器。

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

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

和

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

请帮助我这个或重定向到一个体面的教程。我也希望你能解释一下这在实践中是如何工作的。

谢谢

我想你需要这样的东西:

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

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.

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

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);
    }
}​
相关文章：