[英]Ajax Php Image Upload and Save
我想上傳圖像並將其保存在上載文件夾中,而不刷新頁面。 此外,我也想在div的屏幕上顯示上傳的圖像。 但是,當我運行代碼時,當我嘗試上傳圖像時,文本繼續顯示“ Image Uploading ...”,並且從未完成實際的上傳。 因此,圖像永遠不會顯示在頁面上。 此外,我在將圖片保存到上載文件夾時遇到了麻煩,有人可以向我指出正確的方向嗎? 謝謝!
更新:每次我嘗試上傳圖像時,Ajax POST都會出錯。 實際上,POST請求甚至可能無法到達我的upload.php文件。 當請求實際到達upload.php時,我試圖提醒自己,但是什么也沒有打印出來。 可能是什么原因造成的?
更新#2:我包括了我的文件布局的圖片。 我在privatecreate.blade.php中有HTML和Javascript,在upload.php中有Javascript。 我想將圖像保存在上載文件夾中。
更新#3:我打印出ajax錯誤,它是“未指定輸入文件”
請和我所有人一起忍受。 這是我絕對第一次使用php和sql,我正在努力學習。
HTML:
<div class="container" style="width:700px;">
<br />
<label>Select Image</label>
<input type="file" name="file" id="file" />
<br />
<span id="uploaded_image"></span>
</div>
Javascript:
$(document).ready(function(){
$(document).on('change', '#file', function(){
var name = document.getElementById("file").files[0].name;
var form_data = new FormData();
var ext = name.split('.').pop().toLowerCase();
if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1)
{
alert("Invalid Image File");
}
else{
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("file").files[0]);
var f = document.getElementById("file").files[0];
var fsize = f.size||f.fileSize;
if(fsize > 2000000)
{
alert("Image File Size is very big");
}
else
{
form_data.append("file", document.getElementById('file').files[0]);
$.ajax({
url:"upload.php",
method:"POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
beforeSend:function(){
$('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
},
success:function(data)
{
$('#uploaded_image').html(data);
}
,error: function(ts)
{
alert("error:" + ts.responseText);
}
});
}
}
});
});
PHP(upload.php):
<?php
//upload.php
$message = "Running Upload.php";
echo "<script type='text/javascript'>alert('$message');</script>";
if($_FILES["file"]["name"] != '')
{
$test = explode('.', $_FILES["file"]["name"]);
$ext = end($test);
$name = rand(100, 999) . '.' . $ext;
$location = 'uploads/' . $name;
move_uploaded_file($_FILES["file"]["tmp_name"], $location);
echo '<img src="'.$location.'" height="150" width="225" class="img-thumbnail" />';
}
?>
<?php
//Change your location path
if($_FILES["file"]["name"] != '')
{
$test = explode('.', $_FILES["file"]["name"]);
$ext = end($test);
$name = rand(100, 999) . '.' . $ext;
$location = 'upload/' . $name; // change here & enjoy
move_uploaded_file($_FILES["file"]["tmp_name"], $location);
echo '<img src="'.$location.'" height="150" width="225" class="img-thumbnail" />';
}
?>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.