手写的js图片上传加载工具

1 图片上时，一般需要使用上传按钮+缩略图的形式上传文件，这样可以更好的提升用户体验

2 在上面图片中，用户上传时可以点击按钮图片，图片加载可以看到自己选择的缩略图，这些代码一般在网上开源的js文本编辑插件中都能实现，另外我们也可以自己编写一个类似的js程序完成该功能

3 在上面图片中，我们使用的其实仍然是html的file对象<input type="file">，只不过我们用缩略图代替了file对象

4 用手写的js代码如何完成加载并生成上传缩略图呢，我们需要用到jquery的click()事件代替图片按钮的点击，并且使用html5的URL对象代替按钮图片，切换成file对象所加载的图片

    1 用按钮图片代替file对象

    2 点击按钮图片相当于点击file对象

    3 在图片加载后获得图片缓存

    4 用图片缓存代替按钮图片

    5 生成新的按钮

5 这里面我们需要解决的问题有两个，1获得file对象的缓存，2创建一个url代替按钮图片

            // 获得blob图片缓存
            var upload_img = $("#spu_file_"+file_index)[0].files[0];
            
            // 将blob转化为window的url对象
            var url = window.URL.createObjectURL(upload_img);
            
            // 将url赋值给img
            $("#spu_img_"+file_index).attr("src",url);

6 经过以上的操作我们就可以完成上传图片的加载功能了，是不是很简单