加載用戶在網頁上選擇的圖像

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

}​