php - 表单中的文件域提交上传后 后边显示的是图片的路径。怎么能让他直接显示图片呢

Question

Answer 1

这种可以借助第三方插件来实现异步上传，然后刷新图片路径。
给你安利个我用过的上传插件plupload—强大的前端上传组件。代码实现文中都有介绍

Answer 2

加一个img标签

  <img src="图片的路径">

Answer 3

由于浏览器的安全限制，不允许直接调用本地文件路径。
但可以用一些迂回的方式来实现。
在支持HTML5的浏览器下，用file api获取Data URI；
低版本IE，用AlphaImageLoader滤镜。
关键词已经给出，具体实现方法自己搜一下就可以了。

Answer 4

上传的文件是有个临时路径，但是浏览器里是没法获取的，可以采用第三方插件，uploader很好用，可以裁剪什么的

Answer 5

如果不合适 自己再改进 注意代码中名称的统一 有问题 询问 相互学习 谢谢：

<p class="row">
 <p class="col-xs-3" style="overflow: hidden;">
  <input type="file" placeholder="" value="" name="picurl" id="image_file" onChange="fileSelected();">
  </p>
   <p class="col-xs-3">
    <!-- 显示要上传图片 -->
       <p id="upload_response"></p>//不能少
        <img id="preview" width="100" height="100" border="0" title=""  />
       </p>
    </p>
               

下面引入一段js 如果多图 注意命名问题

// common variables
var iBytesUploaded = 0;
var iBytesTotal = 0;
var iPreviousBytesLoaded = 0;
var iMaxFilesize = 1048576; // 1MB
var oTimer = 0;
var sResultFileSize = '';

function fileSelected() {
    // hide different warnings
    document.getElementById('upload_response').style.display = 'none';
    // get selected file element
    var oFile = document.getElementById('image_file').files[0];
    // filter for image files
    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
    if (! rFilter.test(oFile.type)) {
        document.getElementById('error').style.display = 'block';
        return;
    }
    // little test for filesize
    if (oFile.size > iMaxFilesize) {
        document.getElementById('warnsize').style.display = 'block';
        return;
    }
    // get preview element
    var oImage = document.getElementById('preview');
    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e){
        oImage.src = e.target.result;
    };
    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}

              
        

Answer 6

你可以选择使用百度提供的webuploader进行图片上传操作

Answer 7

两个选择：

1. fileReader读取base64插入图片

2. blob

Answer 8

那得需要用AJAX了，点击上传按钮，先将图片上传到服务器，然后回传到前台保存上传成功的图片路径，把图片加载出来。