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

Javascript  

一、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) {
  17.         } else {
  18.                 $("#banner").wrap("<form id='mbanner' action='demo.php' method='post' xenctype='multipart/form-data'></form>");
  19.                 }
  20.        /*ajax提交*/
  21.         $("#mbanner").ajaxSubmit({
  22.               dataType: 'json',
  23.               beforeSend: function () {
  25.               },
  26.               uploadProgress: function (event, position, total, percentComplete) {
  28.               },
  29.               success: function (data) {
  30.                   if (data.result == 'true') {
  31.                        $('#banner_see').attr('src',data.img);
  32.                   } else {
  33.                        $('#banner').val("");
  34.                  }
  35.              },
  36.              error: function (xhr) {
  38.              }
  39.         });
  40.    });
  41. </script>

demo.php代码如下：

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

结果如下图：



评论 0

发表评论

点击排行

标签云

友情链接

Top