2017-04-26 59 views
1

我写了上传脚本在上传文件夹中的图片(上传)在我的情况。 它工作完美!将php图片上传脚本转换为json响应

我只想在json中获得响应消息。 我不知道如何在脚本和其中使用json。

谢谢!

的script.js

$(document).ready(function (e) { 
$("#uploadimage").on('submit',(function(e) { 
e.preventDefault(); 
$("#message").empty(); 
$('#loading').show(); 
$.ajax({ 
url: "ajax_php_file.php", // Url to which the request is send 
type: "POST",    // Type of request to be send, called as method 
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values) 
contentType: false,  // The content type used when sending data to the server. 
cache: false,    // To unable request pages to be cached 
processData:false,  // To send DOMDocument or non processed data file it is set to false 
success: function(data) // A function to be called if request succeeds 
{ 
$('#loading').hide(); 
$("#message").html(data); 
} 
}); 
})); 

// Function to preview image after validation 
$(function() { 
$("#file").change(function() { 
$("#message").empty(); // To remove the previous error message 
var file = this.files[0]; 
var imagefile = file.type; 
var match= ["image/jpeg","image/png","image/jpg"]; 
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))) 
{ 
$('#previewing').attr('src','noimage.png'); 
$("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>"); 
return false; 
} 
else 
{ 
var reader = new FileReader(); 
reader.onload = imageIsLoaded; 
reader.readAsDataURL(this.files[0]); 
} 
}); 
}); 
function imageIsLoaded(e) { 
$("#file").css("color","green"); 
$('#image_preview').css("display", "block"); 
$('#previewing').attr('src', e.target.result); 
$('#previewing').attr('width', '250px'); 
$('#previewing').attr('height', '230px'); 
}; 
}); 

ajax_php_file.php

<?php 
if(isset($_FILES["file"]["type"])) 
{ 
$validextensions = array("jpeg", "jpg", "png"); 
$temporary = explode(".", $_FILES["file"]["name"]); 
$file_extension = end($temporary); 
if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg") 
) && ($_FILES["file"]["size"] < 100000)//Approx. 100kb files can be uploaded. 
&& in_array($file_extension, $validextensions)) { 
if ($_FILES["file"]["error"] > 0) 
{ 
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>"; 
} 
else 
{ 
if (file_exists("upload/" . $_FILES["file"]["name"])) { 
echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> "; 
} 
else 
{ 
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable 
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored 
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file 
echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>"; 
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>"; 
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>"; 
echo "<b>Size:</b> " . ($_FILES["file"]["size"]/1024) . " kB<br>"; 
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>"; 
} 
} 
} 
else 
{ 
echo "<span id='invalid'>***Invalid file Size or Type***<span>"; 
} 
} 

回答

0

首先通过一个属性阿贾克斯

dataType: "JSON" 

下次你必须建立和所有的数据阵列,你的替代回声替代例如

echo "<span id='invalid'>***Invalid file Size or Type***<span>"; 

变化

$respons['msg']="<span id='invalid'>***Invalid file Size or Type***<span>"; 

然后用

echo json_encode($respons); 

这将传递一个JSON对象客户端 一旦那里你可以控制台输出数据,以了解如何访问嵌套对象