首页 新闻 会员 周边 捐助

jqery file upload插件上传图片之后如何PHP里显示上传之后的照片？

0
[已解决问题] 解决于 2015-06-03 17:05

希望能有好心人来帮帮我...

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="jQuery-File-Upload_V2/css/style.css">
  <link rel="stylesheet" href="jQuery-File-Upload_V2/css/jquery.fileupload.css">
</head>
<body>
<div class="form-wrap">
    <div class="form-wrap-img">
        <div class="form-container">
      <div class="r_step">
        <div class="tit-wrap" id="reg-area">
        <div class="form-box" >

            <form autocomplete="off" action="name.php" method="post" target="_top" id="reg-form">
        <input type="hidden" name="formId" id="formId" value="5e97b030549caad1f2ae02fdd121622c">
      <ul class="regis-list">
                <li>
                    <label class="regis-tit"><i>•</i>&nbsp;用户名&nbsp;&nbsp;</label>
                    <div class="regis-con">
             <input placeholder="请输入用户名" size="22" maxlength="15" value=""  name="username" id="username"  type="input"  regjs="^[a-z0-9]{4,12}$|^[a-z0-9\u4e00-\u9fa5]{1,6}$#js#ig"  regmsg="格式为4-12位英文数字或少于7个汉字" >
          </div>
                </li>
                <li>
                    <label class="regis-tit"><i>•</i>&nbsp;密码&nbsp;&nbsp;</label>
                    <div class="regis-con regis-tit-exp">
                        <input placeholder="请输入密码"  size="22" maxlength="16" value=""  name="password" id="password"  type="password"  msg="密码格式为8至16位数字加字母"  >
                    </div>
                </li>
                <li>
                    <label class="regis-tit"><i>•</i>&nbsp;姓名&nbsp;&nbsp;</label>
                    <div class="regis-con">
          <input  placeholder="请输入真实姓名"  size="22" maxlength="60" value=""  name="realname" id="realname"  type="input"  regjs="^[a-z0-9\u4e00-\u9fa5]{1,6}$#js#ig"  regmsg="格式为少于7个汉字" >
                   </div>
                   <span class="msg-box n-right" for="verify"></span>
                </li>
            </ul>   
            <div class="regis-subm">
                <input type="submit" value="立即注册"/ style="margin-left:31px;">
            </div>

      <input type="hidden" name="con_password" id="con_password" value=""/>

            </form> 
    <div class="container">
    <!--<h1 style="margin-top:-50px;">jQuery File Upload Demo</h1>-->
    <!--<h2 class="lead">Basic Plus version</h2>-->
    <form action="name.php" id="photo" method="POST" onsubmit="return false;" enctype='multipart/form-data'>
      <div style="font-size:20px;" class="row">
        <div class="span16 fileupload-buttonbar col-md-4">
            <input type="file" name="files[]" class="fileupload" displayzone="displayzone1">
            <input type="hidden" name="idcard_front" fromzone="displayzone1"/>
          <span class="btn success fileinput-button">
            <span>请选择文件</span>
          </span>
        </div>
        <div id="displayzone1" class="col-md-8 displayzone"></div>
      </div>
    </form>
  </div>
        </div>
        <!--第一步-->
       </div>
        <!--第二步--> 
         
<!--结束-->                    
    </div>
    </div> 
</div>
  <script src="jQuery-File-Upload_V2/jquery.js"></script>
  <script src="jQuery-File-Upload_V2/js/vendor/jquery.ui.widget.js"></script>
  <script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
  <script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="jQuery-File-Upload_V2/js/jquery.iframe-transport.js"></script>
  <script src="jQuery-File-Upload_V2/js/jquery.fileupload.js"></script>
  <script src="jQuery-File-Upload_V2/js/jquery.fileupload-process.js"></script>
  <script src="jQuery-File-Upload_V2/js/jquery.fileupload-image.js"></script>
<script type='text/javascript'>
    $(function (){
      'use strict';
      var url = 'jQuery-File-Upload_V2/server/php/';
      var uploadButton = $('<button/>')
          .addClass('btn btn-primary')
          .prop('disabled', true)
          .text('Processing...')
          .on('click', function (){
            var $this = $(this),
              data = $this.data();
            $this
              .off('click')
              .text('Abort')
              .on('click', function () {
                $this.remove();
                data.abort();
              });
            data.submit().always(function () {
              $this.remove();
            });
          });
      $('.fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000, // 5 MB
        disableImageResize: /Android(?!.*Chrome)|Opera/
          .test(window.navigator.userAgent),
        previewMaxWidth: 30,
        previewMaxHeight: 30,
        previewCrop: true
      }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#'+ $(e.target).attr("displayzone"));
        $.each(data.files, function (index, file) {
          var node = $('<p/>')
              .append($('<span/>').text(file.name));
          if (!index) {
            node
              .append('<br>')
              .append(uploadButton.clone(true).data(data));
          }
          node.appendTo(data.context);
        });
      }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
          file = data.files[index],
          node = $(data.context.children()[index]);
        if (file.preview) {
          node
            .prepend('<br>')
            .prepend(file.preview);
        }
        if (file.error) {

          node
            .append('<br>')
            .append($('<span class="text-danger"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
          data.context.find('button')
            .text('上传')
            .prop('disabled', !!data.files.error);
        }
      }).on('fileuploaddone', function (e, data) {
        $.each(data.result.files, function (index, file) {
          if (file.url) {
            var link = $('<a>')
              .attr('target', '_blank')
              .prop('href', file.url);
            $(data.context.children()[index])
              .wrap(link);
            var uparea_id = $(data.context).parent("div.displayzone").attr("id");
            var uparea = $("input[fromzone='"+uparea_id+"']");
            uparea.val(file.url);
            var error = $('<span class="text-danger"/>').text('上传成功');
            $(data.context.children()[index])
              .append('<br>')
              .append(error);
          } else if (file.error) {
            var error = $('<span class="text-danger"/>').text(file.error);
            $(data.context.children()[index])
              .append('<br>')
              .append(error);
          }
        });
      }).on('fileuploadfail', function (e, data) {
        $.each(data.files, function (index) {
          var error = $('<span class="text-danger"/>').text('File upload failed...');
          $(data.context.children()[index])
            .append('<br>')
            .append(error);
        });
      }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
  </script>
  </body>

写的很乱.....望大神见谅...

php源码如下

<?php
header("Content-type: text/html; charset=utf-8");
 echo $_POST["username"];
 echo "<br />";
 echo $_POST["password"];
 echo "<br />";
 echo $_POST["realname"];
 echo "<br />";
$PictureName=$_FILES['file']['temp_name'];
$PictureType=strstr(PictureName,'.');
$PictureUploadName=rand(0,99).time();
$destination='./localhost/jQuery-File-Upload_V2/server/php/files/thumbnail'.$PictureUploadName.$PictureType;
move_uploaded_file($_FILES['file']['tmp_name'],$destination);
setcookie('mycookie',$destination);
 ?>

我想让这个表单一上传图片就在PHP里能显示出来这个图片..求大神讲解.

YaYou~的主页 YaYou~ | 初学一级 | 园豆：6
提问于：2015-06-03 15:18
< >
分享
最佳答案
1 
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="jQuery-File-Upload_V2/css/style.css">
  <link rel="stylesheet" href="jQuery-File-Upload_V2/css/jquery.fileupload.css">
</head>
<body>
<div class="form-wrap">
    <div class="form-wrap-img">
        <div class="form-container">
      <div class="r_step">
        <div class="tit-wrap" id="reg-area">
        <div class="form-box" >

            <form autocomplete="off" action="upload.php" method="post" target="_top" id="reg-form">
        <input type="hidden" name="formId" id="formId" value="5e97b030549caad1f2ae02fdd121622c">
      <ul class="regis-list">
                <li>
                    <label class="regis-tit"><i>•</i>&nbsp;用户名&nbsp;&nbsp;</label>
                    <div class="regis-con">
             <input placeholder="请输入用户名" size="22" maxlength="15" value=""  name="username" id="username"  type="input"  regjs="^[a-z0-9]{4,12}$|^[a-z0-9\u4e00-\u9fa5]{1,6}$#js#ig"  regmsg="格式为4-12位英文数字或少于7个汉字" >
          </div>
                </li>
                <li>
                    <label class="regis-tit"><i>•</i>&nbsp;密码&nbsp;&nbsp;</label>
                    <div class="regis-con regis-tit-exp">
                        <input placeholder="请输入密码"  size="22" maxlength="16" value=""  name="password" id="password"  type="password"  msg="密码格式为8至16位数字加字母"  >
                    </div>
                </li>
                <li>
                    <label class="regis-tit"><i>•</i>&nbsp;姓名&nbsp;&nbsp;</label>
                    <div class="regis-con">
          <input  placeholder="请输入真实姓名"  size="22" maxlength="60" value=""  name="realname" id="realname"  type="input"  regjs="^[a-z0-9\u4e00-\u9fa5]{1,6}$#js#ig"  regmsg="格式为少于7个汉字" >
                   </div>
                   <span class="msg-box n-right" for="verify"></span>
                </li>
            </ul>   
            <div class="regis-subm">
                <input type="submit" value="立即注册"/ style="margin-left:31px;">
            </div>

      <input type="hidden" name="con_password" id="con_password" value=""/>


      <!--已上传图片的隐藏域-->
      <input type="hidden" name="uploadimg" value="" id="uploadedimg">
      

            </form> 
    <div class="container">
    <!--<h1 style="margin-top:-50px;">jQuery File Upload Demo</h1>-->
    <!--<h2 class="lead">Basic Plus version</h2>-->
    <form action="name.php" id="photo" method="POST" onsubmit="return false;" enctype='multipart/form-data'>
      <div style="font-size:20px;" class="row">
        <div class="span16 fileupload-buttonbar col-md-4">
            <input type="file" name="files[]" class="fileupload" displayzone="displayzone1">
            <input type="hidden" name="idcard_front" fromzone="displayzone1"/>
          <span class="btn success fileinput-button">
            <span>请选择文件</span>
          </span>
        </div>
        <div id="displayzone1" class="col-md-8 displayzone"></div>
      </div>
    </form>
  </div>
        </div>
        <!--第一步-->
       </div>
        <!--第二步--> 
         
<!--结束-->                    
    </div>
    </div> 
</div>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
  <script src="jQuery-File-Upload_V2/js/vendor/jquery.ui.widget.js"></script>
  <script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
  <script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="jQuery-File-Upload_V2/js/jquery.iframe-transport.js"></script>
  <script src="jQuery-File-Upload_V2/js/jquery.fileupload.js"></script>
  <script src="jQuery-File-Upload_V2/js/jquery.fileupload-process.js"></script>
  <script src="jQuery-File-Upload_V2/js/jquery.fileupload-image.js"></script>
<script type='text/javascript'>
    $(function (){
      'use strict';
      var url = 'jQuery-File-Upload_V2/server/php/';
      var uploadButton = $('<button/>')
          .addClass('btn btn-primary')
          .prop('disabled', true)
          .text('Processing...')
          .on('click', function (){
            var $this = $(this),
              data = $this.data();
            $this
              .off('click')
              .text('Abort')
              .on('click', function () {
                $this.remove();
                data.abort();
              });
            data.submit().always(function () {
              $this.remove();
            });
          });
      $('.fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|jpg)$/i,
        maxFileSize: 5000000, // 5 MB
        disableImageResize: /Android(?!.*Chrome)|Opera/
          .test(window.navigator.userAgent),
        previewMaxWidth: 30,
        previewMaxHeight: 30,
        previewCrop: true
      }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#'+ $(e.target).attr("displayzone"));
        $.each(data.files, function (index, file) {
          var node = $('<p/>')
              .append($('<span/>').text(file.name));
          if (!index) {
            node
              .append('<br>')
              .append(uploadButton.clone(true).data(data));
          }
          node.appendTo(data.context);
        });
      }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
          file = data.files[index],
          node = $(data.context.children()[index]);
        if (file.preview) {
          node
            .prepend('<br>')
            .prepend(file.preview);
        }
        if (file.error) {

          node
            .append('<br>')
            .append($('<span class="text-danger"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
          data.context.find('button')
            .text('上传')
            .prop('disabled', !!data.files.error);
        }
      }).on('fileuploaddone', function (e, data) {


        $.each(data.result.files, function (index, file) {
          //wakasann修改
          if(file.name){
            $("#uploadedimg").val(file.name);
          }

          if (file.url) {
            var link = $('<a>')
              .attr('target', '_blank')
              .prop('href', file.url);
            $(data.context.children()[index])
              .wrap(link);
            var uparea_id = $(data.context).parent("div.displayzone").attr("id");
            var uparea = $("input[fromzone='"+uparea_id+"']");
            uparea.val(file.url);
            var error = $('<span class="text-danger"/>').text('上传成功');
            $(data.context.children()[index])
              .append('<br>')
              .append(error);
          } else if (file.error) {
            var error = $('<span class="text-danger"/>').text(file.error);
            $(data.context.children()[index])
              .append('<br>')
              .append(error);
          }



        });
      }).on('fileuploadfail', function (e, data) {
        $.each(data.files, function (index) {
          var error = $('<span class="text-danger"/>').text('File upload failed...');
          $(data.context.children()[index])
            .append('<br>')
            .append(error);
        });
      }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
  </script>
  </body>
<?php
header("Content-type: text/html; charset=utf-8");

if($_POST){
    //var_dump($_POST);
     echo $_POST["username"];
     echo "<br />";
     echo $_POST["password"];
     echo "<br />";
     echo $_POST["realname"];
     echo "<br />";

     //添加路径
     $paths = "./jQuery-File-Upload_V2/server/php/files/thumbnail/";

     if($_POST['uploadimg'])
     {
         $paths .= $_POST['uploadimg'];
         echo '<img src="'.$paths.'">';
     }    



    //$PictureName=$_FILES['file']['temp_name'];

    //$PictureType=strstr(PictureName,'.');
    //$PictureUploadName=rand(0,99).time();
    //$destination='./localhost/jQuery-File-Upload_V2/server/php/files/thumbnail'.$PictureUploadName.$PictureType;
    //move_uploaded_file($_FILES['file']['tmp_name'],$destination);
    setcookie('mycookie',$paths);

}


 ?>

1. 改动主要是在form中添加了一个隐藏域，存放上传图片之后的名称

2. 在php code中主要是获取图片的名称和显示这个图片

奖励园豆：5
五毛钱的饼 | 小虾三级 |园豆：517 | 2015-06-03 16:16

亲,你能告诉我这个uploadimg是怎么赋值的吗

YaYou~ | 园豆：6 (初学一级) | 2015-06-03 16:27

@L娘: 在fileuploaddone方法里面，

if(file.name){
    $("#uploadedimg").val(file.name);
}

进行赋值的

五毛钱的饼 | 园豆：517 (小虾三级) | 2015-06-03 16:29

@L娘: 在上面的code你应该看到

//wakasann修改
if(file.name){
  $("#uploadedimg").val(file.name);
}

//画面的JS我只加了这个
五毛钱的饼 | 园豆：517 (小虾三级) | 2015-06-03 16:33
其他回答(3)
0

你的男神来啦。。。但是，不会！

田园里的蟋蟀 | 园豆：423 (菜鸟二级) | 2015-06-03 15:27

别这样.....

支持(0) 反对(0) YaYou~ | 园豆：6 (初学一级) | 2015-06-03 15:29
0

PHP中返回图片的URL，然后js中根据这个URL显示图片

dudu | 园豆：29333 (高人七级) | 2015-06-03 15:31

这个URL怎么写啊？dudu大神...

支持(0) 反对(0) YaYou~ | 园豆：6 (初学一级) | 2015-06-03 15:35

我怎么写能把这个上传的图片显示在这个php里面啊？dudu大神！

 

支持(0) 反对(0) YaYou~ | 园豆：6 (初学一级) | 2015-06-03 15:42

@L娘: 上传的图片在apache中对应的虚拟路径是什么？

支持(0) 反对(0) dudu | 园豆：29333 (高人七级) | 2015-06-03 15:43

@dudu: http://localhost/jQuery-File-Upload_V2/server/php/files  这个路径

支持(0) 反对(0) YaYou~ | 园豆：6 (初学一级) | 2015-06-03 15:45

@L娘: 把files下的.htaccess文件删除掉或者将.htaccess中的内容全部用"#"注释掉，就可以看到图片

支持(0) 反对(0) 五毛钱的饼 | 园豆：517 (小虾三级) | 2015-06-03 15:48

@wakasann: 是,这个上传之后我需要把这个图片显示在PHP里面啊 让PHP自动获取上传地址的URL然后把这个图片显示出来....我实在不会写...

支持(0) 反对(0) YaYou~ | 园豆：6 (初学一级) | 2015-06-03 15:57

@wakasann: 就是点击“立即注册”之后显示出来的上传图片和注册信息....我是在是不会写了....

支持(0) 反对(0) YaYou~ | 园豆：6 (初学一级) | 2015-06-03 15:59

@L娘: 在PHP代码中添加获取图片URL的代码：

$img_url = "http://" . substr($destination, 1);
支持(0) 反对(0) dudu | 园豆：29333 (高人七级) | 2015-06-03 15:59

@dudu: dudu大神.我想在点击“立即注册”之后显示出来的上传图片和注册信息....我是在是不会写了....那个文件我删除了 但是还是不行...报这个错

支持(0) 反对(0) YaYou~ | 园豆：6 (初学一级) | 2015-06-03 16:01

@L娘: 是要把这个图片显示在这个画面里面吧，我调试看到

 

javascript code:

,你可以重写$.each内的方法，按照你的形式来显示图片

支持(0) 反对(0) 五毛钱的饼 | 园豆：517 (小虾三级) | 2015-06-03 16:01

@wakasann: 怎么改写啊...我现在脑子都乱了

支持(0) 反对(0) YaYou~ | 园豆：6 (初学一级) | 2015-06-03 16:03

@L娘: 建议参考这个代码：https://github.com/blueimp/jQuery-File-Upload/tree/master/server/php

支持(0) 反对(0) dudu | 园豆：29333 (高人七级) | 2015-06-03 16:04

@dudu: 可以给我个简单的么..........

支持(0) 反对(0) YaYou~ | 园豆：6 (初学一级) | 2015-06-03 16:07

@L娘: 代码复制粘贴过来，然后稍微改改

支持(0) 反对(0) dudu | 园豆：29333 (高人七级) | 2015-06-03 16:11

@dudu: ...............

支持(0) 反对(0) YaYou~ | 园豆：6 (初学一级) | 2015-06-03 16:14
0

如何在PHP里显示这个图片

你是要在后台保存到本地么，咋在后台显示图片...

 

或者你的意思是，后台保存了，你需要在前端的浏览器那里显示出来

上位者的怜悯 | 园豆：172 (初学一级) | 2015-06-03 16:53
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。