js上传图片，获取临时预览地址

最新推荐文章于 2023-10-13 17:09:07 发布

原创最新推荐文章于 2023-10-13 17:09:07 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript实现图片文件的上传，并通过window.URL.createObjectURL实现实时预览。涉及了HTML input元素、jQuery的选择器和FormData对象的应用。

html:

<input id="img" type="file"> // 上传图片
<img id="pic" src=""> // 预览

js:

<script src="jquery.js"></script> // 引入jquery
<script>
$(function(){
    $("#img").change(function(e){
        let img = e.currentTarget.files[0]; // 当前图片文件对象
        // let img = $("#img")[0].files[0];

        const windowURL = window.URL || window.webkitURL;
        // window.URL.createObjectURL 会根据传入的参数创建一个指向该参数对象的URL

        let imgSrc = windowURL.createObjectURL(img); // 生成预览地址
        $("#pic").attr('src',imgSrc);
    });

	let sendData = new FormData();
	sendData.append('file', $("#img")[0].files[0]); // 图片对象
});
</script>