`
DoubleEO
  • 浏览: 157834 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jq实现选择上传文件并立即显示

CSSJSPJavaHTML 
阅读更多
file.jsp 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="../css/file.css">
    <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="../js/uploadFile.js"></script>
</head>
<body>
<form action="#" name="form1" id="form1">
    <div id="demo">
        <input id="f1" name="f1" type="file"/>
        <img id="img1">
    </div>
    <div id="large"></div>
</form>
</body>
</html>


file.css 
#large {
    position: absolute;
    display: none;
    z-index: 999;
}


uploadFile.js 
$(function() {
    var ei = $("#large");
    ei.hide();
    $("#f1").change(function() {
        $("#img1").attr("src", "file:///" + $("#f1").val());
    });
});
分享到：
| 上传文件（使用apache commons.fileupload ...
评论
发表评论

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

相关推荐

    Jq实现带进度条的多文件上传

    在本文中，我们将深入探讨如何使用jQuery（简称为jq）库来实现一个带有进度条的多文件上传功能。这个功能不仅提供了自动和手动上传的选择，还具有文件列表展示、文件类型与大小判断以及清除功能，使得文件上传变得...

    ASP.net+JQ上传文件实例

    在"ASP.NET+JQ上传文件实例"中，我们主要探讨如何利用jQuery的前端功能与ASP.NET的后端处理能力来实现文件上传。以下是一些关键知识点： 1. **HTML表单和文件输入元素**：在HTML页面中，我们需要一个表单来承载文件...

    好用文件上传JQ插件

    在实际使用过程中，这款"好用文件上传JQ插件"可能还支持多文件选择、进度条显示、取消上传、重试失败上传等增强用户体验的功能。同时，由于它基于jQuery，因此可以方便地与其他jQuery库和框架集成，减少开发工作量。...

    输入框选择文件后立即上传

    html选择文件后立即上传，不用执行表单提交。输入款选择文件后立即执行上传操作，无需提交表单，html+jq 简单易用

    jq上传图片插件

    通过FileReader接口，我们可以读取文件内容并显示预览，例如图片。用户在选择图片后，可以立即看到预览效果，增强交互体验。 使用"jq上传图片插件"的基本步骤包括： 1. 引入jQuery和插件相关的JavaScript及CSS文件...

    jQuery实现上传图片预览

    1. 用户选择图片后，会立即显示该图片的预览。 2. 当鼠标悬浮在预览图片上时，会弹出一个跟随鼠标的大图预览，提高了用户体验。 3. 当鼠标离开预览图片时，大图预览自动消失。 通过这种方式，不仅提升了用户体验，...

    基于bootstrap图片上传_jquery支持多张上传

    9. **安全性和性能优化**：在实际应用中，还需要关注上传文件的安全性，如防止XSS和CSRF攻击，以及对上传速度和服务器存储的优化。 总的来说，“基于bootstrap图片上传_jquery支持多张上传”涉及到前端开发中的多个...

    上传预览以及无刷新上传

    用户选择文件后，浏览器不会立即上传，而是先读取文件内容并生成一个预览。例如，对于图片，可以创建一个`&lt;img&gt;`元素显示文件内容；对于文本文件，可以显示部分内容。 **无刷新上传**： 无刷新上传，也称为异步上传...

    jQuery File Upload 可跨域的多图片上传

    `jQuery File Upload` 支持CORS（跨源资源共享）协议，允许用户在不同的域之间上传文件，这极大地扩展了Web应用的可能性，尤其是在需要与API或后端服务交互时。 2. **HTML5 API支持**： - `jQuery File Upload` ...

    Struts2 JQuery同步上传图片

    表单的属性`enctype`设置为`multipart/form-data`，这是上传文件时必须的。表单中有两个字段：一个文本输入框（`&lt;s:textfield&gt;`）用于填写文件标题，另一个文件选择器（`&lt;s:file&gt;`）让用户选择要上传的图片。提交...

    jq图片预览功能.zip

    这样，我们就可以在用户选取图片后立即显示预览效果。 为了实现图片的缩放和旋转，我们需要对`&lt;img&gt;`元素添加额外的CSS样式，并且使用jQuery提供的DOM操作方法来动态调整这些样式。例如，可以使用`.css()`方法来...

    图片上传带裁剪功能Jquery插件

    3. 主要的上传裁剪插件脚本：可能是一个.js文件，实现了图片上传和裁剪的逻辑，与jQuery和imgareaselect协同工作。 4. HTML模板：展示上传按钮、预览区域、裁剪控件等UI元素的HTML文件。 5. CSS样式文件：用于美化UI...

    Jquery实现预览效果

    标题“Jquery实现预览效果”指的是使用jQuery来实现在用户选择图片文件后立即显示预览图的功能。这个功能在许多网站中都很常见，比如在线图像编辑工具或上传照片的应用。以下将详细讲解如何使用jQuery来实现这一功能...

    jquery+php 上传剪裁照片工具

    可以使用`$(document).ready()`来确保页面加载完成后再执行相关的上传和裁剪功能，使用`.on('change', 'input[type=file]', function() {...})`监听文件输入框的改变事件，从而实现在用户选择文件后立即显示预览。...

    JQ图片文件上传之前预览功能的简单实例(分享)

    为了提供更好的用户体验，通常会在用户选择图片文件后立即显示预览，而不是等到文件实际上传到服务器之后。本篇文章将详细介绍如何使用jQuery（简称JQ）实现图片文件上传前的预览功能。 首先，我们需要在HTML页面中...

    Ajax 生成流文件下载(实现代码)

    在客户端，由于使用了Ajax，浏览器不会立即触发文件下载，而是需要额外的处理。一种常见的方式是通过创建`iframe`元素，将表单的`target`属性设置为`iframe`的名称，这样文件下载就会在`iframe`中进行，不影响主页面...

    jQuery点击头像上传并预览图片

    在这个例子中，`&lt;div class="img_show img_show1"&gt;` 用于包裹头像图片和上传文件的输入框。`&lt;img&gt;` 标签显示当前的头像图片，而 `*/*"&gt;` 是一个文件选择器，允许用户选择要上传的图片。`accept` 属性限制用户只能...

    图片上传插件jquery.uploadify详解

    - `'folder'`: 上传文件的目标目录。 - `'multi'`: 是否允许同时上传多个文件，`false` 表示仅允许单个文件上传。 - `'fileDesc'`: 显示在上传对话框中的文件类型描述。 - `'fileExt'`: 允许上传的文件扩展名列...

    plupload.full.min.js

    plupload.full.min.js插件。用于实现PHP+Ajax实现多图片上传的...用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并立即显示在页面上。参考 http://blog.csdn.net/u014175572/article/details/51027626

    jquery实现图片预览,缩略图,效果不错

    在HTML中，可以使用`&lt;img&gt;`标签来显示图片，但若要实现预览，我们需要在用户点击图片链接或选择文件后，不立即加载大图，而是先显示一个较小的预览图。这可以通过监听文件输入事件并读取File对象来实现。jQuery的`....

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