在php中上传图像而不刷新页面

Abd*_*auf 1 javascript php ajax asynchronous

我想上传没有刷新页面的图片.请为此帮助我.我发现很多东西,但永远

Riz*_*van 6

完整脚本:

你需要ajax来做这件事,这里有一些代码可以为你工作:

ajaximage.php

包含PHP代码.
此脚本可帮助您将图像上载到uploads文件夹中.
图像文件名重命名为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;
}
   ?>
Run Code Online (Sandbox Code Playgroud)

的index.php


包含简单的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>
Run Code Online (Sandbox Code Playgroud)

用户的示例数据库设计.

用户包含用户详细信息用户名,密码,电子邮件,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),
)
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)