如何添加簡單的圖片上傳功能？

我想給我的新網站的一個功能，我可以上傳1個圖像的按鈕，並在另一個.html頁面上存儲（本地存儲）的圖像，然後如果我抓住它的絕對URL我可以張貼在論壇網站上它的預覽會顯示，到目前爲止，我有一個功能，讓我上傳和預覽圖像..但我想要去另一層次。如何添加簡單的圖片上傳功能？

HTML：

<input type="file" onchange="previewFile()"><br> 
<img src="" height="200" alt="Image preview...">

的Javascript：

<script> 
    function previewFile(){ 
    var preview = document.querySelector('img'); //selects the query named img 
    var file = document.querySelector('input[type=file]').files[0]; //sames as here 
    var reader = new FileReader(); 

    reader.onloadend = function() { 
     preview.src = reader.result; 
    } 

    if (file) { 
     reader.readAsDataURL(file); //reads the data as a URL 
    } else { 
     preview.src = ""; 
    } 
    } 

    previewFile(); //calls the function named previewFile() 
    </script>

摘要：上傳圖片，其存儲（本地存儲），然後抓住它的絕對URL到其粘貼到另一網站獲取該圖像的預覽。

來源

2015-12-31 Traitor

我認爲你需要後端存儲圖像，除非你只存儲網址，我想看看在HTML5存儲[W3在這種情況下，學校網絡存儲]（http://www.w3schools.com/html/html5_webstorage。asp） – Billy

即時通訊不知道我應該用什麼，如果我得到的網址然後即時通訊罰款，但圖像必須存儲，如果它是本地我必須測試，如果這項工作與否，仍然需要一個答案 – Traitor

什麼你的意思是將圖像存儲在html文件中？你想在html中存儲它的base64代表嗎？您需要澄清是否要將圖像存儲在後端（將其發送到後端並再次檢索）或在前端（只有當前用戶可以看到它（網絡存儲））。網絡存儲是例如如果您創建JavaScript圖像裁剪頁面，用戶打開圖像，裁剪圖像並希望再次將其保存在本地設備上的位置很不錯。後端（您的服務器）從未看到該圖像。 –

1部分：上傳

將文件上傳到PHP是容易的。要爲用戶提供選項，您必須將文件輸入添加到HTML表單。這裏有一個例子：

<input type="file" name="picture" />

爲了確保PHP接收的文件，你必須設置表單方法爲POST和加密類型爲multipart/form-數據

<form action="receiver.php" method="POST" enctype="multipart/form-data">

如果你想通過javascript來上傳你可能想要使用AJAX。下面是一個例子的帖子： https://stackoverflow.com/a/6960586/3797667

第2部分：接收（receiver.php）

上傳的文件可以通過$_FILES[]訪問。下面是一個例子：

if(isset($_FILES['image'])){//Checks if file is set 
    $errors= array(); 
    $file_name = $_FILES['image']['name']; 
    $file_size =$_FILES['image']['size']; 
    $file_tmp =$_FILES['image']['tmp_name']; 
    $file_type=$_FILES['image']['type']; 
    $file_ext=strtolower(end(explode('.',$_FILES['image']['name']))); 
    //(above) checks file extension by getting text after last dot 

    $expensions= array("jpeg","jpg","png");//supported file types 

    if(in_array($file_ext,$expensions)=== false){//is the extension in the supported types 
    $errors[]="extension not allowed, please choose a JPEG or PNG file."; 
    } 

    if($file_size > 2097152){//PHP only supports files under 2MB 
    $errors[]='File size must be excately 2 MB'; 
    } 

    //If there's no error moves files to folder "images" in the root of this file, else prints all the errors 
    if(empty($errors)==true){ 
    move_uploaded_file($file_tmp,"images/".$file_name); 
    echo "Success"; 
    }else{ 
    print_r($errors); 
    } 
}

有關文件管理更多的方法，檢查此鏈接： http://php.net/manual/en/ref.filesystem.php

第3部分：訪問

你可能想，如果你想查看這個帖子得到您的文件的URL： PHP Dynamically get complete Absolute URL Path for specific file that will be included in other files

如果您覺得您需要更多的inf o，請在下面評論，我會更新帖子。祝你的項目好運！

來源：

http://www.tutorialspoint.com/php/php_file_uploading.htm

來源

2015-12-31 14:07:32

「some-file.php」< - 那是什麼？在第1部分中，圖像存儲在哪裏？ – Traitor

'some-file.php'是包含以下PHP代碼的文件的示例名稱，我將更新答案以使其更清晰。圖像將被輸入到輸入（'type =「file」'）中，當表單被提交時，它可以在'$ _FILES'數組中找到。 –

你可以在php部分添加註釋嗎？我想知道每一行代碼的作用，或者重要的部分，如果我瞭解我可以學習/修改的功能，並感謝我的幫助，我真的很感激它：D – Traitor

如何添加簡單的圖片上傳功能？

回答

相關問題