| 关于HTML中上传图片 | 您所在的位置：网站首页 › 国盾网店怎么上传效果图的 › 关于HTML中上传图片 |
关于HTML中上传图片
|
关于HTML中上传图片
值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才会认识并正确执行。 但是还有一点，浏览器只允许用户点击来选择本地文件，用JavaScript对的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径： 但是有个方法可以，利用File和FileReader两个主要对象，可以获得文件信息并读取文件。 HTML文件： 图片预览：
CSS文件： #image-preview { border: 1px solid #ccc; width: 100%; height: 100%; max-width: 200px; max-height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center; }JavaScript： let fileInput = document.getElementById('file'); let info = document.getElementById('info'); let preview = document.getElementById('image-preview'); // 监听change事件: fileInput.addEventListener('change', function() { // 清除背景图片: preview.style.backgroundImage = ''; if (!fileInput.value) { info.innerHTML = '没有选择文件'; return; } let file = fileInput.files[0]; let size = file.size; if (size >= 1 * 1024 * 1024) { alert('文件大小超出限制'); info.innerHTML = '文件大小超出限制'; return false; } // 获取File信息: info.innerHTML = `文件名称: + ${file.name}文件大小: ${file.size} 上传时间: ${file.lastModifiedDate}`; if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) { alert('不是有效的图片文件!'); return; } // 读取文件: let reader = new FileReader(); reader.onload = function(e) { let data = e.target.result; console.log(preview, 'a标签') preview.src = data }; // 以DataURL的形式读取文件: reader.readAsDataURL(file); }); function save() { var url = preview.src; // 获取图片地址 var a = document.createElement('a'); // 创建一个a节点插入的document var event = new MouseEvent('click') // 模拟鼠标click点击事件 a.download = 'beautifulGirl' // 设置a节点的download属性值 a.href = url; // 将图片的src赋值给a节点的href a.dispatchEvent(event) } |
【本文地址】
公司简介
联系我们