使用php完成常见的文件上传功能(推荐)

二，上传文件预览

上传图片时，都会先看效果怎么样，然后再上传的，接下来就是图片预览功能了

（1）可以先有个文件按钮，用于选择文件

<input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" /> //对这个按钮加一个事件

（2）用于显示的这个图片的一个div

<div id="uploadPreview"></div>

给这个div加点样式

#uploadPreview {
  width: 168px;
  height: 168px;             
  background-position: center center;
  background-size: cover;
  border: 4px solid #fff;
  -webkit-box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);
  display: inline-block;<br>}

看下效果：

然后就是写事件了

$("#uploadImage").on("change", function(){
  // 得到一个参考文件列表
  var files = !!this.files ? this.files : [];
  // 如果没有选择任何文件,或者没有文件读到就返回
  if (!files.length || !window.FileReader) return;
  // 只有进行选择的文件是一个形象
  if (/^image/.test( files[0].type)){
    // 创建一个新的FileReader的实例
    var reader = new FileReader();
    // 读取本地文件作为一个DataURL
    reader.readAsDataURL(files[0]);
    // 当加载时,图像数据设置为背景的div
    reader.onloadend = function(){
    $("#uploadPreview").css("background-image", "url("+this.result+")");
    }
  }
});

这只是一个简单的上传预览，上传到文件中的处理页面还没有写，改天补上完整的上传图片代码

看下选中图片的效果

这样，文件上传和图片预览就结束了，这两个结合一下就可以做出图片的上传了，过后我会继续补充完整的~~~