的jQuery/AJAX上傳圖像並保存到文件夾

我發現一些代碼，能夠上載的圖像，並顯示其縮略圖。但是，我想將圖像保存到特定的文件夾。

可以使用什麼jQuery代碼或ajax代碼將原始圖像保存到我選擇的文件夾中？

下面是完整的代碼：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script> 

<style> 
.input-file-row-1:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.input-file-row-1{ 
    display: inline-block; 
    margin-top: 25px; 
    position: relative; 
} 

#preview_image { 
    display: none; 
    width: 90px; 
    height: 90px; 
    margin: 2px 0px 0px 5px; 
    border-radius: 10px; 
} 

.upload-file-container { 
    position: relative; 
    width: 100px; 
    height: 137px; 
    overflow: hidden; 
    background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat; 
    float: left; 
    margin-left: 23px; 
} 

.upload-file-container-text{ 
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    color: #719d2b; 
    line-height: 17px; 
    text-align: center; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100px; 
    height: 35px; 
} 

.upload-file-container-text > span{ 
    border-bottom: 1px solid #719d2b; 
    cursor: pointer; 
} 

.one_opacity_0 { 
    opacity: 0; 
    height: 0; 
    width: 1px; 
    float: left; 
} 
</style> 
<script> 
$(document).ready(function() { 

    function readURL(input, target) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 
      var image_target = $(target); 
      reader.onload = function (e) { 
       image_target.attr('src', e.target.result).show(); 
      }; 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 

    $("#patient_pic").live("change",function(){ 
     readURL(this, "#preview_image") 
    }); 

}); 
</script> 

</head> 

<body> 
<form name="" method="post" action="#" class="feedback-form-1"> 
    <fieldset> 
     <div class="input-file-row-1"> 
      <div class="upload-file-container"> 
       <img id="preview_image" src="#" alt="" /> 
       <div class="upload-file-container-text"> 
        <div class = 'one_opacity_0'> 
         <input type="file" id="patient_pic" label = "add" /> 
        </div> 
        <span> Add Photo </span> 
       </div> 
      </div> 
     </div> 
    </fieldset> 
</form> 
</body> 

</html>

UPDATE：我覺得我是在正確的軌道上。我很接近，但我不知道要從jQuery發送什麼數據。我添加了一個PHP scrit，並將它作爲成功回調，但我沒有發送正確的var。我想如果我只是發出正確的價值觀，我可以得到它。 CODE：

<script> 
$(document).ready(function() { 

    function readURL(input, target) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 
      var image_target = $(target); 
      reader.onload = function (e) { 
       image_target.attr('src', e.target.result).show(); 


       $.ajax({ 
      type:'POST', 
      url: 'theUpload.php', 
      data: input.files[0], 
      success:function(data){ 
       console.log("success"); 
       console.log(data); 
       alert(data); 
      }, 
      error: function(data){ 
       console.log("error"); 
       console.log(data); 
      } 
     }); 



      }; 
      reader.readAsDataURL(input.files[0]); 








     } 
    } 

    $("#patient_pic").live("change",function(){ 
     readURL(this, "#preview_image") 
    }); 

}); 
</script>

來源

2014-01-28 Papa De Beau

你需要一個服務器端語言上傳的圖片存儲到指定的文件夾。 PHP就是其中之一，所以我強烈推薦看看它。

AJAX僅用於在不刷新頁面的情況下執行服務器端調用。

來源

2014-01-28 06:51:54

好吧，我也可以使用PHP。 –

我相信有一些AJAX代碼可以上傳到一個PHP腳本與它的信息吧？ –

這是正確的。通過這個AJAX調用，您指的是您已經創建的PHP腳本。最好的選擇是使用AJAX調用jQuery。你可以在http://www.jquery.com看到更多的信息 –

試試這個。

腳本：

function uploadFile(){ 
    var input = document.getElementById("file"); 
    file = input.files[0]; 
    if(file != undefined){ 
    formData= new FormData(); 
    if(!!file.type.match(/image.*/)){ 
     formData.append("image", file); 
     $.ajax({ 
     url: "upload.php", 
     type: "POST", 
     data: formData, 
     processData: false, 
     contentType: false, 
     success: function(data){ 
      alert('success'); 
     } 
     }); 
    }else{ 
     alert('Not a valid image!'); 
    } 
    }else{ 
    alert('Input something!'); 
    } 
}

HTML：

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  
</head> 
<body> 
    <input type="file" id="file" /> 
    <button onclick="uploadFile();">Upload</button> 
</body> 
</html>

upload.php的：

<?php 
$dir = "image/"; 
move_uploaded_file($_FILES["image"]["tmp_name"], $dir. $_FILES["image"]["name"]); 
?>

來源

2014-04-19 11:54:39 johnpong

約翰的回答是好的，但文件= input.files [0]不起作用對我來說

file = input[0].files[0]

的作品。

來源

2015-04-26 10:40:14

的jQuery/AJAX上傳圖像並保存到文件夾

回答

相關問題