javascript上传多张图片并预览

时间 2020-05-22

原文原文链接

直接上代码html

html代码app

<div>
                <label>封面</label>
                <input type="file" id="cover" name="cover">
                <img id="smallCover" width=200px height=200px>
            </div>

js代码this

$('#cover').on('change',function(){ var filePath = $(this)[0].files[0].name       //获取到input的value，里面是文件的路径 
                fileFormat = filePath.split('.')[1].toLowerCase() src = window.URL.createObjectURL(this.files[0]) //转成能够在本地预览的格式 
                      
                // 检查是不是图片 
                if( !fileFormat.match(/png|jpg|jpeg/) ) { alert('上传错误,文件格式必须为：png/jpg/jpeg') return } $('#smallCover').attr('src',src) });

以上是上传一张图片并预览spa

html就是一个类型是文件的input，下面放一个img用来预览。code

js也很简单就是当其图片改变时转成本地预览格式，并判断图片后缀是否符合要求。orm

下面给出上传多张并预览htm

html代码blog

<div>
                <label>图片</label>
                <input type="file" id="picture" multiple/>
            </div>
            <div id="previewImg">
            </div>

js代码图片

$('#picture').on('change', function(){ var imgFiles = $(this)[0].files for (i=0;i<imgFiles.length;i++){ filePath = imgFiles[i].name fileFormat = filePath.split('.')[1].toLowerCase() src = window.URL.createObjectURL(imgFiles[i]) if( !fileFormat.match(/png|jpg|jpeg/) ) { alert('上传错误,文件格式必须为：png/jpg/jpeg') return } var preview = document.getElementById("previewImg") var img = document.createElement('img') img.width = 200 img.height = 200 img.src = src preview.appendChild(img) } })

多张相似，只是多了个div，用for循环展现多张图ip