`

文件上传之图片预览

javascripthtmlfirefox 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="jquery-1.4.4.js"></script>
 <script language='javascript'> 
        function getFullPath(obj) 
        { 
            if(obj) 
            { 
                //ie 
                if ($.browser.msie) 
                { 
                    obj.select(); 
                    return document.selection.createRange().text; 
                } 
                //firefox 
                else if($.browser.mozilla) 
                { 
                    if(obj.files) 
                    { 
                        return obj.files.item(0).getAsDataURL(); 
                    } 
                    return obj.value; 
                } 
                return obj.value; 
            } 
        } 

		function showImg(src){
			$("#img").css("display","");
			$("#img").attr("src",src);
		}
    </script> 


</head>

<body>
	<div>
		<input id="f1" name="f1" type="file" onchange="showImg(getFullPath(this));" />
   </div>

   <div>
		<img id="img" alt="" style="display:none" />
   </div>
</body>

</html>
分享到：
| 过程、函数、包的语法
评论
发表评论

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

相关推荐

    多文件预览上传-多图片预览上传

    综上所述，"多文件预览上传-多图片预览上传"涉及了前端文件处理、预览、HTTP上传，以及JAVA后端的文件接收和存储等多个技术环节，是一个完整的文件上传解决方案。在实际应用中，还需要结合具体的业务需求和安全策略...

    ExtJS带进度条的多文件上传和图片预览

    在"ExtJS带进度条的多文件上传和图片预览"这个项目中，它展示了如何利用ExtJS来实现一个高效且用户友好的文件上传功能，尤其适用于处理大量或大体积的文件。下面将详细介绍这个项目中的关键知识点。 1. **ExtJS组件...

    文件上传及图片预览

    dwz+jquery+fileupload+springmvc实现文件上传及图片预览

    文件上传 图片预览

    上传图片时的图片预览（html）

    图片上传(图片预览+文件类型验证)

    本文将详细讲解如何实现“图片上传(图片预览+文件类型验证)”这一功能，主要涵盖以下几个核心知识点： 1. **前端图片预览**： 在用户选择图片文件后，提供预览功能可以提升用户体验。这通常通过HTML5的File API来...

    一次选择多个文件上传+图片预览。HTML5源代码支持PC浏览器端和手机移动端.zip

    在现代Web开发中，文件上传和图片预览是常见的功能需求，尤其在用户交互和数据交换方面扮演着重要角色。本资源"一次选择多个文件上传+图片预览。HTML5源代码支持PC浏览器端和手机移动端.zip"提供了一个实用的解决...

    C#图片上传,用于winform,带图片预览

    这个功能通常会结合文件选择、图片预览以及上传操作，为用户提供直观且易于使用的体验。以下是对这个"图片上传"项目的一些详细知识点解释： 1. **WinForms控件**： - `OpenFileDialog`：用于打开文件对话框，让...

    c#mvc文件图片预览批量上传

    在C# MVC（Model-View-Controller）框架中，文件图片预览和批量上传是一项常见的功能，用于增强用户交互体验。MVC模式是.NET Framework中Web应用开发的一种流行设计模式，它将应用程序逻辑分为三个主要组件：模型、...

    input file上传图片预览

    首先，`&lt;input type="file"&gt;` 是HTML中用于处理文件上传的元素。它创建一个文件选择对话框，让用户能够选取本地文件。要实现图片预览，我们需要监听这个input元素的`change`事件，当用户选择文件后，事件会被触发。 ...

    jQuery实现上传图片预览

    现在，我们将使用jQuery来处理文件上传事件，并实时更新预览图片。 ```javascript // script.js $(document).ready(function () { // 当文件输入发生变化时触发 $('#imageUpload').on('change', function (e) { ...

    jquery文件上传插件（多文件选择、带进度条 ,图片预览）

    本教程将深入讲解如何使用jQuery实现一个功能丰富的文件上传插件，包括多文件选择、进度条显示和图片预览。 首先，我们需要引入jQuery库和WebUploader插件。WebUploader是由阿里团队开发的一款优秀的文件上传组件，...

    HTML5实现多文件图片预览上传实例代码

    在HTML5中，实现多文件图片预览和上传的功能是通过结合File API、FormData对象以及Ajax技术来完成的。这个实例代码正是展示了如何利用这些特性创建一个用户友好的图片上传体验。 首先，我们需要理解HTML5中的File ...

    文件图片预览上传下载

    开发者可以参考这些资源来快速集成图片预览、文件上传、下载和删除功能到自己的项目中。需要注意的是，实际应用中还需要考虑错误处理、进度显示、多文件上传、断点续传等高级特性，以及适应不同浏览器和设备的兼容性...

    .Net图片上传预览

    首先，我们需要理解图片预览的基本原理。图片预览通常涉及到前端和后端两部分。前端负责展示图片，后端则处理图片的上传和验证。 1. **前端预览**： - **HTML5的File API**：在现代浏览器中，我们可以使用File API...

    asp.net上传时图片预览

    接着，为了实现图片预览，我们可以在前端使用JavaScript或jQuery来实现。当用户选择图片后，利用FileReader API读取文件内容并转化为base64编码，然后设置到img标签的src属性，实现预览效果。在ASP.NET MVC中，可以...

    支持批量上传、JS图片预览的前端上传组件

    【标题】"支持批量上传、JS图片预览的前端上传组件"所涉及的知识点主要集中在前端开发领域，尤其是文件上传和用户体验优化上。这个组件设计用于处理用户在Web应用中上传多个文件的需求，同时提供了图片预览功能，...

    文件上传下载+预览功能

    在IT领域，文件上传下载和预览功能是Web应用程序中非常常见且重要的组成部分，尤其在文档分享、在线协作和知识管理平台中。本篇将详细阐述这一功能的实现原理、技术选型以及相关知识点。 首先，文件上传是用户将...

    ASP.NET 图片预览

    综上所述，ASP.NET图片预览功能的实现涉及客户端与服务器端的交互，需要掌握HTML5的File API、ASP.NET的文件上传机制以及跨浏览器的兼容性处理。通过合理的设计和实现，我们可以为用户提供一个高效且兼容性良好的...

    ajax多文件上传图片文件带预览功能

    "Ajax多文件上传图片文件带预览功能"是实现这一需求的一种高效且用户体验良好的技术方案。通过Ajax（异步JavaScript和XML）技术，我们可以实现无刷新的文件上传，同时在用户选择文件后即时预览图片，提升交互体验。 ...

    上传图片预览（限制格式大小）

    在IT行业中，尤其是在Web...在实际项目中，你可能还需要考虑其他因素，如错误处理、安全措施（防止恶意文件上传）以及更复杂的前端用户体验设计。在上传文件的过程中，确保遵循最佳实践，以保证应用的安全性和性能。

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