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

}

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

3 个答案: