当前位置： 代码迷 >> Web前端 >> 无刷新上传图片 可以实时预览 选择图片后即自动上传，没上传按钮
  详细解决方案

无刷新上传图片 可以实时预览 选择图片后即自动上传，没上传按钮

热度：514   发布时间：2013-11-15 22:28:15.0
无刷新上传图片 可以实时预览 选择图片后即自动上传，没有上传按钮

区别一般的上传，一般的上传要点击上传按钮，本例无按钮，选择图片后就自动上传

jquery.form.js版本为2.84

无刷新上传图片 可以实时预览 选择图片后即自动上传，没有上传按钮
演示

?

?

XML/HTML Code
  1. <script?type="text/javascript"?src="../../js/jquery-1.3.2.min.js"></script>??
  2. <script?type="text/javascript"?src="scripts/jquery.form.js"></script>??
  3. ??
  4. <script?type="text/javascript"?>??
  5. ?$(document).ready(function()?{???
  6. ??????????
  7. ????????????$('#photoimg').live('change',?function()????????????{???
  8. ???????????????????????$("#preview").html('');??
  9. ????????????????$("#preview").html('<img?src="loader.gif"?alt="Uploading...."/>');??
  10. ????????????$("#imageform").ajaxForm({??
  11. ????????????????????????target:?'#preview'??
  12. ????????}).submit();??
  13. ??????????
  14. ????????????});??
  15. ????????});???
  16. </script>??
  17. <div?style="width:600px">??
  18. ??
  19. <form?id="imageform"?method="post"?enctype="multipart/form-data"?action='ajaximage.php'>??
  20. 上传?<input?type="file"?name="photoimg"?id="photoimg"?/>??
  21. </form>??
  22. <div?id='preview'>??
  23. </div>??
  24. ??
  25. ??
  26. </div>??

?ajaximage.php

PHP Code
  1. <?php??
  2. session_start();??
  3. $session_id='1';?//$session?id??
  4. $path?=?"../upload/";??
  5. ??
  6. ????$valid_formats?=?array("jpg",?"png",?"gif",?"bmp");??
  7. ????if(isset($_POST)?and?$_SERVER['REQUEST_METHOD']?==?"POST")??
  8. ????????{??
  9. ????????????$name?=?$_FILES['photoimg']['name'];??
  10. ????????????$size?=?$_FILES['photoimg']['size'];??
  11. ??????????????
  12. ????????????if(strlen($name))??
  13. ????????????????{??
  14. ????????????????????list($txt,?$ext)?=?explode(".",?$name);??
  15. ????????????????????if(in_array($ext,$valid_formats))??
  16. ????????????????????{??
  17. ????????????????????if($size<(1024*1024))??
  18. ????????????????????????{??
  19. ????????????????????????????$actual_image_name?=?time().substr(str_replace("?",?"_",?$txt),?5).".".$ext;??
  20. ????????????????????????????$tmp?=?$_FILES['photoimg']['tmp_name'];??
  21. ????????????????????????????if(move_uploaded_file($tmp,?$path.$actual_image_name))??
  22. ????????????????????????????????{??
  23. ??????????????????????????????????
  24. ??????????????????????????????????????
  25. ????????????????????????????????????echo?"<img?src='../upload/".$actual_image_name."'??class='preview'>";??
  26. ????????????????????????????????}??
  27. ????????????????????????????else??
  28. ????????????????????????????????echo?"failed";??
  29. ????????????????????????}??
  30. ????????????????????????else??
  31. ????????????????????????echo?"Image?file?size?max?1?MB";??????????????????????
  32. ????????????????????????}??
  33. ????????????????????????else??
  34. ????????????????????????echo?"Invalid?file?format..";?????
  35. ????????????????}??
  36. ??????????????????
  37. ????????????else??
  38. ????????????????echo?"Please?select?image..!";??
  39. ??????????????????
  40. ????????????exit;??
  41. ????????}??
  42. ?>??

?


原文地址:http://www.freejs.net/article_biaodan_75.html

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.