javascript 在php中上传图片而不刷新页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8484660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Upload an image without refreshing page in php
提问by Abdul Rauf
I want to upload an image without refreshing page. please help me for this purpose. I find many thing but ever
我想上传图片而不刷新页面。为此，请帮助我。我发现很多东西，但从来没有
回答by Rizvan
Complete Script :
完整脚本：
you need ajax to do it and here some code to work for u :
你需要 ajax 来做这件事，这里有一些代码可以为你工作：
ajaximage.php
Contains PHP code.
This script helps you to upload images into uploads folder.
Image file name rename into timestamp+session_id.extention
ajaximage.php
包含 PHP 代码。
此脚本可帮助您将图像上传到上传文件夹。
图像文件名重命名为timestamp+session_id.extention
<?php
include('db.php');
session_start();
$session_id='1'; // User session id
$path = "uploads/";
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
$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)) // Image size max 1 MB
{
$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
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
?>
index.php
索引.php
Contains simple PHP and HTML code.
Here $session_id=1 means user id session value.
包含简单的 PHP 和 HTML 代码。
这里 $session_id=1 表示用户 ID 会话值。
<?php
include('db.php');
session_start();
$session_id='1'; // User login session value
?>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>
Sample database design for Users.
用户的示例数据库设计。
Users Contains user details username, password, email, profile_image and profile_image_small etc.
用户 包含用户详细信息用户名、密码、电子邮件、profile_image 和 profile_image_small 等。
CREATE TABLE `users` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),
)
Javascript Code
Javascript代码
$("#photoimg").live('change',function(){})
// photoimg is the ID name of INPUT FILE tag and
$('#imageform').ajaxForm()
//imageform is the ID name of FORM. While changing INPUT it calls FORM submit without refreshing page using ajaxForm() method.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
});
</script>
回答by DrXCheng
回答by Oliver Spryn
Uploading files to the server without a page refresh requires some additional client-side tools. These tools will then need to communicate with the PHP backend that you have written. Here are some popular solutions which offer what you are looking for:
在不刷新页面的情况下将文件上传到服务器需要一些额外的客户端工具。然后，这些工具需要与您编写的 PHP 后端进行通信。以下是一些流行的解决方案，可提供您正在寻找的内容：
- Uploadify, my favorite of these solutions: http://www.uploadify.com/
- SWFUpload, similar to Uploadify: http://swfupload.org/
- jQuery Form Plugin, an AJAX-based uploader: http://jquery.malsup.com/form/#file-upload
- Uploadify，我最喜欢的这些解决方案：http: //www.uploadify.com/
- SWFUpload，类似于Uploadify：http: //swfupload.org/
- jQuery 表单插件，一个基于 AJAX 的上传器：http: //jquery.malsup.com/form/#file-upload
Hope that helps.
希望有帮助。
回答by Russell Dias
Submit it via XMLHttpRequest. In a nutshell you would need to initialise a FormData()object and append your fileto the object, then initiate an xhrconnection, and send your object via xhr xhr.send.
This is all at a verybasic level...
通过 提交XMLHttpRequest。简而言之，您需要初始化一个FormData()对象并将您file的对象附加到该对象，然后启动一个xhr连接，并通过 xhr 发送您的对象xhr.send。这一切都处于非常基本的水平......
Or, better yet, use a pre-existing tool.
或者，更好的是，使用预先存在的工具。
回答by Harsh
You need to use ajaxto do that. Ajaxwill send the request to a PHPscript that will do the work without refreshing the entire page.
你需要使用ajax来做到这一点。Ajax将请求发送到一个PHP脚本，该脚本将在不刷新整个页面的情况下完成工作。
回答by Selvakumar Ponnusamy
Lot of jquery plug ins are available, you can show progress bar too. refer this
有很多jquery插件可用，你也可以显示进度条。参考这个
