`

html上传图片之前在网页预览实现

 
阅读更多
HTML5之FileReader的使用 http://blog.csdn.net/jackfrued/article/details/8967667

原文：http://my.oschina.net/rst/blog/638135 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>preview image</title>
</head>

<body>
<form>
    <input type="file">
</form>

<script src="/static/js/jquery.min.js"></script>
<script>
    $('input[type="file"]').change(function(e){
        reader = new FileReader();
        reader.readAsDataURL(e.target.files[0]);
        reader.onload = function(){
            $('body').append($('<img />', {src: reader.result}));
        };
    });
</script>
</body>
</html>
分享到：
| 20 个 CSS 高级技巧汇总
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS+asp.net+图片上传+预览+支持多上传+上传前预览

    在本文中，我们将深入探讨如何使用JavaScript（JS）与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求，尤其是在用户交互丰富的网站和应用中。 首先，...

    zyUpload实现图片预览上传

    【zyUpload实现图片预览上传】是一个用于网页端图片上传并提供预览功能的解决方案，它支持HTML5、Java和PHP等技术。这个工具的主要优点是用户在上传图片之前可以预览效果，增强了用户体验，同时也提供了多语言后端...

    JS+HTML5实现上传图片预览效果

    本文将深入探讨如何使用JavaScript（JS）和HTML5技术来实现在网页上上传图片并实时预览的效果。这一功能允许用户在正式提交之前查看他们选择的图片，增加了交互性和准确性。 首先，HTML5引入了一项新特性——`...

    jquery上传图片预览简单实现

    本文将深入探讨如何使用jQuery实现一个简单的图片上传预览功能，这是一个常见的需求，尤其在网页表单中，用户需要在提交之前查看所选图片的效果。 首先，我们需要明白图片预览的基本原理。在用户选择图片文件后，...

    纯javascript实现上传图片前图片预览，判断图片大小

    在本文中，我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能，并且检查图片的大小，确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用，因为它允许...

    多图片上传预览控件

    总结来说，“多图片上传预览控件”是结合了`jQuery`、HTML5 File API和Ajax技术的用户交互组件，实现了文件选择、预览、上传等一系列功能，极大地提升了用户在网页上的交互体验。通过理解和掌握这些技术，开发者可以...

    图片上传及预览+时间水印

    其次，图片预览是用户在上传图片前能在界面上看到即将上传图片的效果，这增强了用户体验，减少了因上传错误图片而产生的额外操作。预览通常是在前端完成的，通过FileReader API读取图片数据，然后使用`DataURL`显示...

    图片上传本地预览插件

    在IT领域，图片上传本地预览插件是一个常见的功能组件，尤其在网页应用和桌面软件中，它极大地提升了用户体验。这个插件的核心作用是让用户在实际上传图片到服务器之前，能够在本地环境中预览图片效果，确保图片的...

    图片上传即时预览

    在IT行业中，图片上传即时预览是一项常见的功能，特别是在网页应用和社交媒体平台中。这个功能允许用户在上传图片之前能够看到即将上传的图片效果，提高了用户体验。本项目是基于ASP.NET后端技术和jQuery前端库实现...

    多图片上传预览插件

    在IT领域，多图片上传预览插件是网站或应用程序中常见的一种功能，它允许用户在上传图片到服务器之前进行在线预览。这样的插件极大地提升了用户体验，因为用户可以在正式提交之前检查图片的质量、方向和效果。下面...

    H5页面直传阿里云且图片可网页预览

    成功上传图片后，`put`方法返回的结果中包含了图片的URL，可以用于网页预览。你可以将其插入到`&lt;img&gt;`标签的`src`属性中，或者通过CSS背景图等方式展示。 ```html ``` ```javascript document.getElementById('...

    jquery;图片上传;图片上传预览

    在网页开发中，图片上传预览是一个常见的功能，它允许用户在正式上传图片之前查看预览效果，确保图片质量和格式符合需求。这个功能通常通过JavaScript库实现，而jQuery作为一个广泛使用的JavaScript库，提供了便利的...

    jsp 本地图片上传前的预览

    在用户上传图片之前提供预览功能，能够提升用户体验，让用户在正式提交前确认图片效果。本项目着重讨论如何在Java JSP环境下实现本地图片的预览功能，结合jQuery库来增强前端交互。 首先，我们要理解JSP（Java...

    支持图片预览上传代码.rar_progressp1s_上传图片_支持图片预览上传代码

    这个名为"支持图片预览上传代码.rar_progressp1s_上传图片_支持图片预览上传代码"的压缩包文件，显然是一个提供了jQuery实现的图片预览和上传功能的代码资源。下面我们将详细探讨这一技术实现。 首先，jQuery是一个...

    HTML5图片压缩上传预览效果代码.zip

    在“HTML5图片压缩上传预览效果代码.zip”这个压缩包中，我们主要探讨的是如何利用HTML5的新特性来实现图片的压缩、上传和预览，从而有效地减少图片占用服务器空间的问题。 首先，我们需要了解HTML5中的FileReader ...

    图片上传前预览和操作图片

    在IT行业中，图片上传是网页应用中常见的功能之一，尤其在社交网络、博客系统或电商平台等，用户常常需要上传图片来展示内容。"图片上传前预览和操作图片"这个主题涉及的技术点主要包括图片预览、图片操作以及上传...

    HTML5 图片上传 带预览功能 (pc,手机都能适配)

    HTML5图片上传带预览功能是一项重要的前端技术，它使得用户在网页上可以方便地选择并预览图片，然后再进行上传。这项技术充分利用了HTML5的新特性，如File API、FormData对象以及Canvas画布，实现了在PC和移动设备上...

    图片上传控件（带预览功能）

    3. **图片预览**：在上传图片之前，预览功能让用户能够检查所选图片是否符合预期。这个功能通常通过HTML5的File API实现，可以读取到本地文件，生成一个数据URL，然后用此URL设置图片元素的`src`属性，达到预览的...

    js上传图片预览

    `readAsDataURL`方法将文件内容转化为Data URL，然后在`onload`事件回调中，将这个URL设置为图片元素的`src`属性，从而实现在页面上预览图片。 此外，还可以添加额外的功能，比如限制上传文件的大小和类型，或者...

    图片上传预览

    在IT行业中，图片上传预览是一项常见的功能，特别是在网页或应用程序中，用户往往需要在上传图片之前能够预览效果。这个功能提供了用户友好的交互体验，确保上传的图片符合预期。这里我们将深入探讨图片上传预览的...

Magicbox
Global site tag (gtag.js) - Google Analytics