使用php上传图片，但不刷新页面

insrf1ej 于 2023-03-28 发布在 PHP

关注(0)|答案(2)|浏览(152)

所以一般来说，我没有问题（尚未），但我需要建议.我不想做一个页面，用户可以上传他/她的图像.但上传不应该刷新页面，因为用户输入的其他数据会丢失.我知道有一堆 AJAX 和php上传帖子，但问题是，旧的浏览器不支持XMLHttpRequest 2。我希望至少支持IE9。我也知道有一个iframe解决方案。但现在使用iframe对我来说就像是在驾驶Mr.豆豆迷你当你有一个新的宝马在车库（无意冒犯）。所以谁能给予我建议，我应该怎么做？我应该走哪条路？
谢谢

php

来源：https://stackoverflow.com/questions/22038036/uploading-images-using-php-but-without-page-refresh

2条答案

按热度按时间

hwazgwia1#

这不是最好的方式来做的事情，事实上，我正在寻找一个更快的方法来做到这一点，但这里是我自己编码，将上传的图像数据到数据库，也自动更改您的个人资料照片没有刷新。
首先是客户端的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' ");

赞(0）回复(0）举报 2023-03-28

1zmg4dgp2#

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

赞(0）回复(0）举报 2023-03-28

我来回答

使用php上传图片，但不刷新页面

2条答案

相关问题

热门标签

最新问答