`

使用input file不需上传服务器选择后实现预览

阅读更多
$("input:file").change(function(){
	  var thisObj = this;
	  var reader = new FileReader();
	  reader.onload = function (e) {
		  var data = e.target.result;
		  //加载图片获取图片真实宽度和高度
		  var image = new Image();
		  image.onload=function(){
		      var width = image.width;
		      var height = image.height;
			  $("img.showImageImg").attr("src",reader.result);
		  };
	      image.src= data;
	 };
	 reader.readAsDataURL(this.files[0]);
  });

   reader.result 得到BASE64节码

 可以通过传输BASE64实现文件上传服务器

 

/**
	 * 
	 * @param base64Str 
	 * @throws IOException
	 */
	public static void uploadBASE64(String base64Str) throws IOException{
		BASE64Decoder d = new BASE64Decoder(); 
		//data:image/gif;base64,R0lGODlhg.....
		//去除逗号和逗号之前字符串
        byte[] bs = d.decodeBuffer(base64Str);  
        FileOutputStream os = new FileOutputStream("xxxx/x.gif");  
        os.write(bs);  
        os.close();
	}

 

  • 大小: 6.9 KB
  • 大小: 53.2 KB
  • 大小: 44.9 KB
  • 大小: 5 KB
  • 大小: 43 KB
分享到:
评论

相关推荐

    input file图片上传即时预览

    本文将详细介绍如何使用JSP(JavaServer Pages)来实现`input type="file"`标签的图片上传即时预览功能。 首先,我们要理解HTML中的`<input type="file">`标签,它是用来让用户选择本地文件的。当我们设置`<input ...

    HTML input type=file文件选择表单元素.docx

    input type=file 是 HTML 中的一种表单元素,用于选择文件并上传到服务器。HTML5 之前的 input type=file 元素只能一次上传一张图片,无法满足一次上传多图的交互需求。因此,许多场景下,使用 swfupload.js 来代替...

    js input file多个文件上传功能.zip

    在JavaScript(JS)中,实现一个输入元素`<input type="file">`的多文件上传功能是一项常见的需求,尤其在Web开发中。这个"js input file多个文件上传功能.zip"包含了一个实现这一功能的代码示例,适用于图片和其他...

    jQuery实现input[type=file]多图预览上传删除等功能

    根据给定文件内容,下面介绍有关于jQuery实现input[type=file]多图预览上传删除功能的知识点。 ### jQuery实现多图上传预览与删除功能 #### 1. 前端界面结构 在实现多图上传预览与删除功能时,首先需要布局一个...

    js获取 input file 图片立即显示

    "js获取input file 图片立即显示"这个话题就是关于如何利用JavaScript来实现在用户选择图片后即时预览的功能。以下是一个详尽的步骤解释和相关知识点: 1. **HTML 结构**: 首先,我们需要在HTML页面中创建一个`...

    上传控件input file 样式美化

    在网页设计中,上传控件`<input type="file">`是必不可少的元素,它允许用户选择本地文件并上传到服务器。然而,由于浏览器的安全限制,这个控件的默认样式通常非常简陋,无法直接通过CSS进行大幅度的美化。本教程将...

    input type=file 及时预览图片

    总的来说,`<input type="file">` 结合 `FileReader API` 可以实现用户在选择图片后的即时预览,这在现代Web开发中是一个常用且实用的技术,提高了用户的交互体验。理解并掌握这一技术,对于提升网页的交互性和专业...

    angularjs实现上传图片并且预览

    在本文中,我们将深入探讨如何使用AngularJS框架来实现图片上传和预览功能。AngularJS,作为一款强大的前端JavaScript框架,提供了丰富的功能和模块化设计,使得开发动态Web应用变得更加简单。图片上传和预览是现代...

    jquery图片上传前预览 无需上传至服务器

    要实现图片预览,开发者通常会在HTML中添加一个`<input type="file">`元素,让用户选择文件。当用户选择文件后,可以通过jQuery监听`change`事件,获取到选中的文件对象。然后,使用File API的`FileReader`接口读取...

    文件上传插件bootstrap File

    Bootstrap File Input就是基于这个API来实现文件选择和预览功能。 2. **Bootstrap框架**: Bootstrap是Twitter开源的一款前端开发框架,包含CSS和JS组件,用于快速构建响应式和移动优先的网站。Bootstrap File Input...

    weui框架实现上传、预览和删除图片功能代码

    然而,原始的WeUI框架仅包含了CSS样式文件,不包含用于实现功能的JavaScript代码。针对这一情况,我们可以自行添加JavaScript来实现一些特定功能,如上传、预览和删除图片。下面将详细解释如何使用WeUI框架实现这些...

    实现在文件上传到服务器之前实时预览的jQuery插件

    这个插件允许用户在选择文件后立即在客户端进行预览,无需等待文件实际上传到服务器,提高了用户体验。 首先,我们需要理解jQuery是什么。jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、...

    js读取本地图片进行预览,上传服务器

    当用户选择一个文件后,可以通过`<input type="file">`元素的`change`事件获取选中的文件对象。例如: ```javascript document.querySelector('input[type="file"]').addEventListener('change', function(e) { ...

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

    - 需要限制文件类型,防止恶意用户上传不安全或大体积的文件,可以通过检查文件扩展名或者MIME类型实现。 - 文件大小限制同样重要,防止服务器被大量大文件拖垮。 - 避免路径遍历攻击,确保文件被安全地保存在...

    上传视频并预览

    本文将详细解析如何使用PHP实现视频上传并进行预览的流程。 首先,我们需要理解视频上传的基本原理。在Web环境中,用户通过HTML表单提交包含视频文件的POST请求到服务器。PHP作为后端语言,接收到请求后,会处理...

    js input上传文件可input上传图片

    在JavaScript中,`<input type="file">`元素是用于让用户选择本地文件并上传到服务器的一个常见组件。本文将深入探讨如何使用JavaScript处理文件上传,特别是针对图片的上传操作。 一、HTML `<input type="file">` ...

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

    File API允许浏览器直接访问用户选择的文件内容,而无需将文件实际上传到服务器。用户可以通过`<input type="file">`元素选择文件,然后通过JavaScript获取这些文件的信息,如文件名、大小、类型等。在HTML5中,`...

    Excel文件上传预览示例

    1. **文件上传**:在ASP.NET中,文件上传主要通过HTML `<input type="file">` 标签实现。当用户选择文件后,这些文件信息会被封装在HTTP请求的multipart/form-data中。在C#后端,我们可以使用`HttpPostedFileBase`类...

    单file控件批量上传文件

    在“单file控件批量上传文件”的实现过程中,JavaScript负责前端的文件选取、预览、进度显示等功能。它会遍历用户选择的每个文件,创建FormData对象,将文件添加到FormData中,然后通过XMLHttpRequest或fetch API...

    使用fileuploader.js实现文件上传

    本篇文章将深入探讨如何使用`fileuploader.js`这个工具来实现文件上传功能。`fileuploader.js`是一个轻量级的JavaScript库,它简化了前端文件上传的处理过程,提供了丰富的定制选项和友好的API。 首先,`file...

Global site tag (gtag.js) - Google Analytics