文件的上传平常使用input type=“file”使用 不过这默认太丑了 我们可以调用一下点击

                
            
            
                                            上传                复制代码

简单配置一下结构 用jq写简单事件还是很舒服的

在js中绑定事件

$('span').click(function(){          $('input').click() =>点击span 触发点击 input  我们可以把input设置成display none 就相当于 点击span上传文件了      })复制代码

新建一个img标签

        上传          不标记src复制代码

介绍一下window.URL

URL对象是硬盘（SD卡等）指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径，这个时候就可以设置到中显示了。

$('src').attr({'src':window.URL.createObjectURL(obj.files[0])})复制代码

这样图片就能显示了吗？ 答案是不行

在网页加载的时候已经判断了 window下的URL 状态，因此在我们上传的时候需要再次判断，通过input的change方法

$('input').change(function(ev){   =>可能看起来会有点懵  这里是调用了change 然后又调用了一个函数        =>所以此处参数稍微有点变化         var files = ev.target.files;         var url=window.URL.createObjectURL(files[0])         $('img').attr({'src':url})      })复制代码

接下来看个简单的 直接调用

 =>直接绑定函数 注意一定要加参数  要获取数据嘛        上传        复制代码

在js中定义方法

function change(e){                }复制代码

然后开始编辑

function change(e){          var files=e.files          $('img').attr({'src':window.URL.createObjectURL(files[0])}) =>这样就可以获取到路径了      }复制代码

前面两种方法都可以 直接引用方法 获取数据不需要加target 然后通过调用change方法需要加上target

得到数据之后就能得到更多的数据啦 比如说文件大小

function change(e){          var files=e.files          console.log(e.files[0].size)          $('img').attr({'src':window.URL.createObjectURL(files[0])})      }复制代码

获取文件更多数据 慢慢打印琢磨吧！！！