问题
So generally, i don't have a problem (yet), but I need advice. I want't to make a page where a user can upload his/hers image. But the upload should not refresh the page as the other data that a user enters will get lost. I know there is a bunch of ajax and php uploader posts, but here's the thing. Using XMLHttpRequest 2 isn't supported in older browsers. I would like at least IE9 to be supported. I also know there is an iframe solution. But using iframe's today sounds to me like driving Mr.Beans Mini when you have a new BMW in the garage (no offense). So can anyone give me advice on what should I do? Which way should I go?
Thanks
回答1:
This isn't the best way to do things, infact I am looking for a faster way to do this, but here is something I have coded myself that will upload the image data to the database and also automatically change your profile photo without refresh.
First the HTML, CSS and Javascript/JQuery for the client side.
//NOTE: this code is jquery, go to JQuery.com and find the download then link it in a script tag
$("#activateFile").on('click', function(){
$("#fileBrowser").click();
});
//if you want a finish edit button then use this otherwise put this code in the fileBrowser change event handler below KEEP THE readURL(this) OR IT WON'T WORK!
$("#finishEdit").on('click', function(){
var imgData = document.getElementById('image').src;
//imageData is the variable you use $_POST to get the data in php
$.post('phpscriptname.php', {imageData:imgData}, function(data){
//recieve information back from php through the echo function(not required)
});
});
$("#fileBrowser").change(function(){
readURL(this);
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image').attr('src', e.target.result)
};
reader.readAsDataURL(input.files[0]);
}
}#fileBrowser{
display: none;
}
#image{
width: 200px;
height: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Whatever your title is</title>
</head>
<body>
<img id="image" src="somesource.png" alt="somesource"/>
<!-- NOTE: you can use php to input the users current image in the source attribute -->
<br/>
<br/>
<!-- position and style these however you like -->
<input type="file" id="fileBrowser"> <!-- this is display none in css -->
<button id="activateFile">Choose files</button>
<br/>
<br/>
<button id="finishEdit">Done</button>
</body>
</html>Now I will I show the server side with the database
require("yourconnectiontodatabase.php"); //create a connection to your db.
$imgData = $_POST['imageData']; //the same variable we gave it in the jquery $.post method.
//The bad part now is because we are using data straight from the input I don't think it's possible to know if the content type of the file is an image. This is a security flaw as people could try upload .exe files however, I do know the imagedata we get in javascript contains the filetype it is so you could check in javascript if it's an image type like if it's png or jpeg.
//NOTE: when looking for types in images use image/type for example image/png
//upload image to database
$updateprofile = mysql_query("UPDATE table_name SET profileimage='$imgData' ");
回答2:
create a connection file conn.php
<?php
$dbhost ='localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'test';
$conn = mysql_connect($dbhost,$dbuser,$dbpass) or die('could not connect database');
mysql_select_db($dbname) or die('could not select database');
?>
create a image upload page with index.php
<?php
include('conn.php');
session_start();
$session_id='1';
?>
<html>
<head>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$('#photoimg').on('change', function() {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
<style>
body
{
font-family:arial;
}
.preview
{
width:200px;
border:solid 1px #dedede;
padding:10px;
}
#preview
{
color:#cc0000;
font-size:12px
}
</style>
<body>
<div style="width:600px">
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>
</div>
</body>
</html>
create a image upload php script ajaxupload.php
<?php
include('conn.php');
session_start();
$session_id='1';
$path = "uploads/";
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
try {
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
if($_FILES) {
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name)) {
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats)) {
if($size<(1024*1024)) {
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
echo "<img src='uploads/".$actual_image_name."' class='preview'>";
} else {
throw new Exception("fiald to upload image");
}
} else {
throw new Exception("Image file size max 1 MB");
}
} else {
throw new Exception("Invalid file format..");
}
} else {
throw new Exception("Please select image..!");
}
} else {
throw new Exception("Please select image..!");
}
}
} catch(Exception $e) {
echo $e->getMessage();
}
?>
来源：https://stackoverflow.com/questions/22038036/uploading-images-using-php-but-without-page-refresh