<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/map.js"></script>
<style>
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h3>
请选择图片文件：image/*
</h3>
<form id="formId">
<div class="filediv">
</div>
<input type="file" name="file" accept="image/*" onchange="addImg(this)" />
<br>
<br>
<input type="button" value="提交" onclick="toSave()">
<br>
<br>
<div class="imgdiv">
</div>
</form>
<script>
var map = new Map();
function addImg(obj) {
console.debug(map.elements);
//判断是否已存在
var oo=map.containsKey(obj.value);
if(oo){
return;
}
var objUrl = getObjectURL(obj.files[0]);
if (objUrl) {
viewImg(objUrl);
}
$(obj).hide();
$(".filediv").append('<input type="file" name="file" accept="image/*" onchange="addImg(this)" />');
//将已选择的文件放到Map中
map.put(obj.value, obj.value);
};
function viewImg(objUrl) {
$(".imgdiv").append("<img src='"+objUrl+"' >");
}
function toSave() {
$("#formId :file").each(function(i) {
$(this).attr("name", "file" + i);
});
console.debug(map.elements);
//$("#formId").submit();
}
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
</body>
</html>
分享到：
相关推荐
在前端开发中，"input file上传图片预览"是一个常见的需求，它允许用户选择本地的图像文件，并在上传前提供预览。这个功能在许多网站和应用中都很实用，例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...
### jQuery实现上传图片预览 在现代Web开发中，用户交互体验是提升网站吸引力的关键因素之一。其中，图片上传预览功能是许多应用场景中的一个重要环节，例如社交媒体、在线购物平台等。通过使用jQuery库，我们可以...
HTML5多图片上传预览功能是现代网页开发中常用的一种技术，它允许用户在上传图片前先进行预览，提供更好的用户体验。这个功能主要依赖于HTML5的一些新特性，包括File API、FormData对象以及Canvas元素。下面将详细...
html多图片上传并在线预览 用javascript实现
在这个场景中，我们关注的是HTML5在上传视频和图片方面的应用，特别是如何实现预览和多文件上传功能。 在HTML5中，`<input type="file">`元素得到了极大的增强，它允许用户选择本地文件进行上传，并且可以通过...
HTML5图片上传插件是现代网页开发中常用的一种功能，它允许用户在网站上选择并上传图片，同时提供预览和尺寸调整等便利性。在HTML5中，File API的引入使得开发者能够直接操作用户的本地文件，实现了无刷新的图片预览...
在HTML5中，实现多文件图片预览和上传的功能是通过结合File API、FormData对象以及Ajax技术来完成的。这个实例代码正是展示了如何利用这些特性创建一个用户友好的图片上传体验。 首先，我们需要理解HTML5中的File ...
在这个“html5实现多图片上传预览（源码，已测试）”的项目中，我们主要关注的是HTML5的新特性——File API和拖放API，它们允许我们在不借助服务器端处理的情况下实现本地文件的读取和预览。 首先，File API是HTML5...
首先，我们需要理解图片预览的基本原理。图片预览通常涉及到前端和后端两部分。前端负责展示图片，后端则处理图片的上传和验证。 1. **前端预览**： - **HTML5的File API**：在现代浏览器中，我们可以使用File API...
"JS上传图片预览技术" 在Web开发中，上传图片预览...JS上传图片预览技术是通过 HTML、CSS 和 JavaScript 实现的，该技术可以跨浏览器实现图片上传预览功能，並且能够自动调整图片的尺寸以适应不同的浏览器和屏幕尺寸。
HTML5在移动端的图片上传和预览功能是现代网页开发中的常见需求，尤其在移动设备上，用户期望能够即时查看即将上传的图片效果。本文将详细介绍如何利用HTML5的File API和Canvas技术来实现移动端的图片本地预览和缩略...
HTML5的Canvas元素提供了强大的图像处理能力，可以用来实现图片预览。用户选择图片后，通过FileReader API读取文件内容，然后使用Canvas的drawImage方法将图片绘制到画布上，最后可以通过toDataURL方法将画布内容...
本主题聚焦于"C#上传图片预览"，这是一个常见的功能需求，无论是在网页上还是桌面应用中，用户通常希望在实际上传图片前能预览图片效果。这一功能不仅提升了用户体验，也减少了因误传错误图片而造成的困扰。 在C#中...
在现代Web开发中，用户体验是至关重要的，而HTML5提供了许多增强用户体验的新特性，其中之一就是图片上传和预览功能。这个特性使得用户在上传图片前能够预览选定的图片，提高了交互性和可用性，尤其在移动端设备上...
在现代Web开发中，用户体验是至关重要的，而图片预览功能就是提升用户体验的一个重要环节。本文将深入探讨如何使用JavaScript（JS）和HTML5技术来实现在网页上上传图片并实时预览的效果。这一功能允许用户在正式提交...
Bootstrap图片上传和预览是网页开发中的一个常见功能，它结合了美观的界面设计与实用的文件处理技术。Bootstrap是一个流行的前端开发框架，提供了一系列组件和工具，使得开发者能够快速构建响应式、移动设备优先的...
总的来说，这个上传组件结合了HTML5的新特性，提供了批量上传和图片预览功能，适用于需要处理大量文件上传的Web应用。它的实现涉及到前端开发的多个方面，包括文件操作API、浏览器兼容性处理以及用户体验设计，对于...
在这个背景下，"jQuery H5移动端图片预览插件"应运而生，它旨在解决移动端图片预览的问题，为用户提供流畅、高效且自适应的图片浏览体验。 这款插件主要针对手机和平板等移动设备设计，它能够无缝地集成到你的H5...
在图片预览和缩略图生成中，我们可以利用Canvas的drawImage方法将图片加载到Canvas上，然后通过调整Canvas的宽度和高度来生成缩略图。 3. **Data URL**：Data URL是一种内联资源表示方式，可以直接在页面中嵌入图像...