使用php上传图片，但不刷新页面 [英] Uploading images using php, but without page refresh
问题描述
因此，一般来说，我还没有问题，但是我需要建议.我不想建立一个页面，用户可以在上面上传他/她的图像.但是上载不应刷新页面，因为用户输入的其他数据将会丢失.我知道有很多ajax和php上传器帖子，但这是事实.较旧的浏览器不支持使用XMLHttpRequest 2.我希望至少支持IE9.我也知道有一个iframe解决方案.但是使用iframe的今天听起来像是在车库里有新的宝马时驾驶Beans Mini先生(没有冒犯).那么谁能给我建议我该怎么办?我应该走哪条路?
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?
谢谢
推荐答案
这不是最好的方法，事实上，我正在寻找一种更快的方法，但这是我为自己编写的代码，将图像数据上传到数据库，并且无需刷新即可自动更改您的个人资料照片.
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.
首先是客户端的HTML，CSS和Javascript/JQuery.
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' ");
这篇关于使用php上传图片，但不刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
