0

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

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

请帮助我或将我重定向到一个体面的教程。还赞赏有关其在实践中如何工作的解释。

谢谢

4

3 回答 3

2

我想你需要这样的东西：

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

于 2012-12-30T13:19:17.103 回答
0

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

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

}​
于 2012-12-31T12:28:52.177 回答
0 
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.
于 2012-12-31T10:48:12.630 回答