JavaScript图片预览

    技术2024-11-22  47

    预览选中的图片文件

    jQuery$("#selectImage").change(function(){ $("#image").attr("src",URL.createObjectURL($(this)[0].files[0])); }); Vuedata:{ image:"" }, methods:{ imageReaderAndShow:function (e) { //e是input type="file" 的change事件 let fileReader = new FileReader(); fileReader.readAsDataURL(e.target.files[0]); //e.target.files[0]是选中的图片文件数据 fileReader.onload=function(){ e.target.nextElementSibling.src=fileReader.result; //e.target.nextElementSibling表示input控件的下一个兄弟元素,因为这里是把<img> 紧挨着放在 <input> 后面的 this.image=e.target.files[0]; //这里是图片上传的时将文件数据赋值给this.image,可以放在方法外面 } } }

    至此,若有纰漏,望各位不吝赐教

    Processed: 0.015, SQL: 9