php使用jquery Form 实现页面无刷新上传图片,并预览图片

一、jquery.form.js下载地址

jquery.form.js下载地址

<br>
二、例子如下:

demo.html代码如下:

  1. <!DOCTYPE HTML>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ajax表单处理</title>
  6. </head>
  7. <body>
  8. 上传图片:<input type="file" name="banner" id="banner"/>
  9. 预览图片:<img src="" id="banner_see">
  10. </body>
  11. <script type="text/javascript" src="jquery.min.js"></script>
  12. <script type="text/javascript" src="jquery.form.js"></script>
  13. <script type="text/javascript">
  14. $('#banner').on('change', function () {
  15. if ($("#mbanner").length > 0) {
  16. } else {
  17. $("#banner").wrap("<form id='mbanner' action='demo.php' method='post' xenctype='multipart/form-data'></form>");
  18. }
  19. /*ajax提交*/
  20. $("#mbanner").ajaxSubmit({
  21. dataType: 'json',
  22. beforeSend: function () {
  23. },
  24. uploadProgress: function (event, position, total, percentComplete) {
  25. },
  26. success: function (data) {
  27. if (data.result == 'true') {
  28. $('#banner_see').attr('src',data.img);
  29. } else {
  30. $('#banner').val("");
  31. }
  32. },
  33. error: function (xhr) {
  34. }
  35. });
  36. });
  37. </script>

demo.php代码如下:

  1. <?php
  2. if (file_exists("./" . $_FILES["banner"]["name"]))
  3. {
  4. $arrRet=array(
  5. 'result'=>'false'
  6. );
  7. }
  8. else
  9. {
  10. $ret=move_uploaded_file($_FILES["banner"]["tmp_name"],"./" . $_FILES["banner"]["name"]);
  11. if($ret){
  12. $arrRet=array(
  13. 'result'=>'true',
  14. 'img'=> $_FILES["banner"]["name"]
  15. );
  16. }else{
  17. $arrRet=array(
  18. 'result'=>'false'
  19. );
  20. }
  21. }
  22. echo json_encode($arrRet);
  23. ?>

结果如下图:



评论 0

发表评论

Top