关于HTML中上传图片

女爷i 2022-05-06 13:46 243阅读 0赞

# [关于HTML中上传图片][HTML] #

值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才会认识并正确执行。

但是还有一点，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径：  
但是有个方法可以，利用File和FileReader两个主要对象，可以获得文件信息并读取文件。

HTML文件：

<form method="post" enctype="multipart/form-data" id="file_upload">
    　　<p>图片预览：</p>
    　　<div id="preview"></div>
    　　<p>
    　　　　<input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg">
    　　</p>
       <p id="test-file-info"></p>
    </form>

CSS文件：

#preview {
    				border: 1px solid #ccc;
    				width: 50%;
    				height: 200px;
    				background-size: contain;
    				background-repeat: no-repeat;
    				background-position: center center;
    			}

JavaScript：

<script type="text/javascript">
    			var
    				fileInput = document.getElementById('test-image-file'),
    				info = document.getElementById('test-file-info'),
    				preview = document.getElementById('test-image-preview');
    			// 监听change事件:
    			fileInput.addEventListener('change', function() {
    						// 清除背景图片:
    						preview.style.backgroundImage = '';
    						// 检查文件是否选择:
    						if (!fileInput.value) {
    							info.innerHTML = '没有选择文件';
    							return;
    						}
    						// 获取File引用:
    						var file = fileInput.files[0];
    						//判断文件大小
    						var size = file.size;
    						if (size >= 1 * 1024 * 1024) {
    							alert('文件大小超出限制');
    							return false;
    						}
    						// 获取File信息:
    						info.innerHTML = '文件名称: ' + file.name + '<br>' +
    							'文件大小: ' + file.size + '<br>' +
    							'上传时间: ' + file.lastModifiedDate;
    						if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
    								alert('不是有效的图片文件!');
    								return;
    							}
    							// 读取文件:
    							var reader = new FileReader();
    							reader.onload = function(e) {
    								var
    									data = e.target.result;         
    								preview.style.backgroundImage = 'url(' + data + ')';
    							};
    							// 以DataURL的形式读取文件:
    							reader.readAsDataURL(file);
    							
    						});
    		</script>

[HTML]: https://www.cnblogs.com/MagicalOfD/p/6426310.html

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML 各平台上传图片

[https://github.com/tx1721110240/UploadImg][https_github.com_tx1721110240_UploadImg] 苹果

柔光的暖阳◎/ 2022年12月23日 01:00/ 0 赞/ 193 阅读

相关 html 无组件上传图片,javascript无组件上传图片类

javascript无组件上传图片类首先声明本代码是转自其他网站的，版权应该归属其所有者，贴出来的目的是为了和大家一起探讨、共同学习。下面是代码： default.asp

野性酷女/ 2022年10月06日 07:52/ 0 赞/ 198 阅读

相关 html5压缩图片并上传

手机端图片有很大的，上传的时候很慢，这时候就要压缩一下了，有一个开源的js可以压缩图片的大小，开源地址如下：[https://github.com/think2011/loca

阳光穿透心脏的1/2处/ 2022年08月04日 12:59/ 0 赞/ 250 阅读

相关 Android关于图片如何压缩上传

开发中遇到需要上传图片的场景还是很常见的，这就涉及到图片的压缩处理。如果不进行压缩，势必造成消耗大量的流量，下载图片的速度慢等。关于android如何压缩，网上的资料也

短命女/ 2022年07月18日 04:11/ 0 赞/ 275 阅读

相关关于图片上传

添加图片jsp <form action="${path }/teacher/upHeadImg" method="post" enctype="multip

超、凢脫俗/ 2022年06月05日 05:36/ 0 赞/ 214 阅读

相关 html上传图片后，在页面显示上传的图片

html上传图片后，在页面显示上传的图片 1、html <form class="container" enctype="multipart/form-data"

爱被打了一巴掌/ 2022年06月04日 02:42/ 0 赞/ 303 阅读

相关 HTML上传图片的回显

document.getElementById("showImg").src = window.URL.createObjectURL(personsFile.file

- 日理万妓/ 2022年05月25日 12:55/ 0 赞/ 489 阅读

相关关于HTML中上传图片

[关于HTML中上传图片][HTML] 值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,meth

女爷i/ 2022年05月06日 13:46/ 0 赞/ 244 阅读

相关关于图片上传实现方案

一、实现方案（一）　　1、通过window.URL.createObjectURL（兼容性较好），实现起来稍微复杂些。 <!DOCTYPE html> <

Love The Way You Lie/ 2021年11月17日 22:06/ 0 赞/ 280 阅读

相关简单的html图片上传工具

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片上传预览</

拼搏现实的明天。/ 2021年09月27日 15:42/ 0 赞/ 284 阅读