【前端预览】实现多张上传图片预览查看

遇到平台页面开发需要提交上传多张证书图片,之前也做过预览,但貌似都是单张或者存到隐藏域交给后台处理,那么趁着这次总结了下单张或者多张图片上传并且预览的代码:

 

<div class="container">
                <label>请选择一个图像文件:label>

                <input type="file" accept="image/gif,image/png,image/jpeg,image/jpg" id="file_input" multiple/>
                <button id="submit">提交button>
            div>
            <ul>
                <li>
                    <div class="pic_cover">
                        <img src="http://www.wangzhibo.top/wp-content/uploads/2018/06/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20180426142248-1-300x300.jpg" alt="证书封皮">
                        <span class="close">span>
                    div>
                li>
            ul>

重点看下input里面的内容  附件上传属性    file      accept  控制上传内容的格式 ,这里是图片 可以 image/*  指所有图片的格式 也可以指定格式的图片如: gif,png,jpeg,jpg,

multiple   是   控制否单张或者图片的关键   不写就是只能单张上传。



                    
                    

你可能感兴趣的:(【前端预览】实现多张上传图片预览查看)