<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="author" content="EdieLei" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
<title>HTML5 图片上传预览</title>
<style>
#photo{ width:100px; height:100px; margin:auto; margin-top:100px; background:#0cc; border-radius:100px;}
#photo img{ width:100px; height:100px; border-radius:50px;}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#img').change(function() {
var file = this.files[0];
var r = new FileReader();
r.readAsDataURL(file);
$(r).load(function() {
$('#photo').html('<img src="' + this.result + '" alt="" />');
})
})
})
</script>
</head>
<body>
<h3>HTML5 图片上传预览</h3>
<input id="img" type="file" accept="image/*" />
<div id="photo"></div>
</body>
</html>
分享到：
相关推荐
在这个场景中，我们关注的是HTML5在上传视频和图片方面的应用，特别是如何实现预览和多文件上传功能。 在HTML5中，`<input type="file">`元素得到了极大的增强，它允许用户选择本地文件进行上传，并且可以通过...
HTML5是现代网页开发的重要标准，它为网页应用带来了许多增强功能，其中之一就是对手机端图片上传的支持。在移动设备上，用户可能希望通过点击或拖拽来上传照片，或者从设备的媒体库中选择图片。以下是对这个主题的...
下面我们将详细探讨HTML5中的图片上传与预览技术，并讨论如何实现对PC和手机的兼容。 首先，HTML5引入了`<input type="file">`元素的新属性，如`accept`和`multiple`，使得开发者可以指定用户能够选择的文件类型和...
"html5微信手机端图片上传裁剪代码.zip"这个压缩包文件，显然包含了实现微信手机端图片上传和裁剪功能的代码。 首先，`index.html`是网页的主文件，它定义了网页的结构和内容。在这个项目中，`index.html`应该包含...
在现代Web开发中，H5（HTML5）已经成为构建交互式和富媒体应用程序的重要工具。本文将深入探讨如何使用H5实现多图片预览、上传功能，并支持点击和拖拽操作，同时...因此，一个完整的图片上传系统是前后端协作的结果。
HTML5手机端图片上传裁剪代码是针对移动设备开发的一款功能强大的前端插件，它集成了图片上传和裁剪的功能，适用于各种手机应用程序或网页。这个插件利用HTML5的File API、Canvas以及WebGL技术，实现了用户在手机上...
在.NET技术框架下，开发移动端应用时，常常需要实现用户在手机端通过H5页面上传图片的功能。这个".net手机端移动端多图片h5上传案例代码"提供了实现这一功能的具体示例。H5上传通常指的是使用HTML5的技术来实现文件...
HTML5源代码支持PC浏览器端和手机移动端.zip"提供了一个实用的解决方案，它利用HTML5的新特性实现了跨平台的多文件选择上传和图片预览功能，适应于PC和移动设备。 首先，我们来看HTML5的`<input type="file">`元素...
综上所述，实现"上传图片带预览功能"需要对HTML5、JavaScript、响应式设计和安全策略有深入理解。通过结合这些技术，我们可以创建一个高效、安全且用户友好的图片上传预览系统，无论是在桌面还是移动端，甚至微信...
HTML5微信手机端图片上传裁剪代码是一种基于Web技术实现的移动端图像处理功能，它允许用户在微信等移动平台上选择图片并进行裁剪，以适应不同的应用场景，如社交媒体分享、在线编辑或个人定制等。这一功能的核心技术...
【标题】"uploadify H5版（uploadifive）基于html5的手机上传图片插件"涉及的关键技术点包括HTML5、Uploadify、uploadifive和.NET后端处理。Uploadify是一个JavaScript上传组件，而其H5版本uploadifive则是针对现代...
zyUpload批量上传php版是一款专为手机端设计的图片批量上传工具，基于PHP和jQuery技术构建，能够方便地在Web和HTML5环境下实现多图片上传功能。这款插件特别适用于那些需要在移动设备上处理大量图片上传的项目，极大...
在手机端，为了优化用户体验，可能会使用HTML5的拖放（Drag and Drop）API，让用户能更方便地从手机相册中选取图片。同时，File API允许我们在客户端预览、处理或检查上传的文件，例如调整图片大小、检查文件类型等...