Так что вообще, у меня нет проблемы (пока), но мне нужен совет. Я не хочу создавать страницу, на которой пользователь может загружать свой имидж. Но загрузка не должна обновлять страницу, так как другие данные, которые вводит пользователь, будут потеряны. Я знаю, что есть куча сообщений ajax и php uploader, но вот что. Использование XMLHttpRequest 2 не поддерживается в старых браузерах. Я бы хотел, чтобы IE9 поддерживалась. Я также знаю, что есть решение iframe. Но использование iframe сегодня звучит для меня как вождение Mr.Beans Mini, когда у вас есть новый BMW в гараже (без обид). Так может ли кто-нибудь дать мне совет, что мне делать? В каком направлении мне идти?
благодаря
Это не лучший способ сделать что-то, infact. Я ищу более быстрый способ сделать это, но вот что-то, что я закодировал сам, который загрузит данные изображения в базу данных, а также автоматически изменит вашу фотографию профиля без обновления.
Сначала 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>
создать файл подключения 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 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 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(); } ?>