Question

所以一般来说，我还没有问题，但我需要建议。我不想制作一个用户可以上传他/她的图像的页面。但上传不应刷新页面，因为用户输入的其他数据将丢失。我知道有一堆ajax和php uploader帖子，但这就是问题所在。旧版浏览器不支持使用XMLHttpRequest 2。我想至少支持IE9。我也知道有一个iframe解决方案。但是今天使用iframe听起来就像驾驶Mr.Beans Mini一样，当你在车库里有一辆新宝马时（没有冒犯）。所以有人可以给我建议我应该怎么做？我应该走哪条路？

由于

Answer 1

这不是最好的做事方式，事实上我正在寻找一种更快的方法来做到这一点，但这是我自己编写的一些内容，它会将图像数据上传到数据库并自动更改你的个人资料照片没有刷新。

首先是客户端的HTML，CSS和Javascript / JQuery。

//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>

现在我将向服务器端显示数据库

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' ");

Answer 2

创建连接文件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');
?>

使用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>

创建图片上传php脚本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();
    }
?>

使用php上传图像，但没有页面刷新

2 个答案: