`
qq_24665727
  • 浏览: 121324 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

js上传图片到服务器并且预览图片

    博客分类:
  • web
阅读更多

前端:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
	<img id="image" src="" />
	<br />
	<input type="file" id="file"  onchange="selectImage(this);" />
	<br />
	<input type="button" onclick="uploadImage();" value="提交" />
	<script>
	//js进行图片预览 使用input标签来选择图片,使用FileReader读取图片并转成base64编码,然后发送给服务器。
		var image = '';
		function selectImage(file) {
			if (!file.files || !file.files[0]) {
				return;
			}
			var filepath = document.getElementById("file").value;
			//为了避免转义反斜杠出问题,这里将对其进行转换
			var re = /(\\+)/g; 
			var filename=filepath.replace(re,"#");
			//对路径字符串进行剪切截取
			var one=filename.split("#");
			//获取数组中最后一个,即文件名
			var two=one[one.length-1];
			//再对文件名进行截取,以取得后缀名
			var three=two.split(".");
			 //获取截取的最后一个字符串,即为后缀名
			var last=three[three.length-1];
			if(last!="jpg"){
				alert("请您上传jpg格式的图片!");
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image').src = evt.target.result;
				image = evt.target.result;
			}
			reader.readAsDataURL(file.files[0]);
		}
		function uploadImage() {
			
			$.ajax({
				type : 'POST',
				url : 'uploadImageAjax?t_number=929144493',  //请求路径以及传值
				data : {
					image : image    //这里传递的是base64编码  json格式
				},
				async : false,
				dataType : 'json'
			});

		}
	</script>
	<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
</body>
</html>

 后台:

package com.servlet;


import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.sql.Connection;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


import com.dao.TeacherDao;
import com.util.DbUtil;

import sun.misc.BASE64Decoder;

public class UploadImageAjaxServlet extends HttpServlet {
	DbUtil dbUtil = new DbUtil();
	TeacherDao teacherDao = new TeacherDao();
	String base64 = null;
	String t_number = null;
	String filePath = "h:\\Image\\";
	Connection con;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 设置字符编码为UTF-8,支持汉字显示
		response.setCharacterEncoding("UTF-8");
		String t_number = request.getParameter("t_number");
		// 上传文件路径
		base64 = request.getParameter("image");// 接受图片的Base64编码
		System.out.println(base64);
		GenerateImage(base64, filePath + t_number + ".jpg");

	}
	/**
	 * 从Base64编码转换为图片文件
	 * 
	 * @param imgStr
	 * @param imgFilePath
	 * @return
	 */
	public static boolean GenerateImage(String imgStr, String imgFilePath) {// 对字节数组字符串进行Base64解码并生成图片

		// 只允许jpg
		String header ="data:image/jpeg;base64,";
		// 去掉头部(必须加这个,不然图片传输数据错误)
		imgStr = imgStr.substring(header.length());

		if (imgStr == null) // 图像数据为空
			return false;
		BASE64Decoder decoder = new BASE64Decoder();
		try {
			// Base64解码
			byte[] bytes = decoder.decodeBuffer(imgStr);
			for (int i = 0; i < bytes.length; ++i) {
				if (bytes[i] < 0) {// 调整异常数据
					bytes[i] += 256;
				}
			}
			// 生成jpeg图片
			OutputStream out = new FileOutputStream(imgFilePath);
			out.write(bytes);
			out.flush();
			//System.out.println("1");
			out.close();
			return true;
		} catch (Exception e) {
			return false;
		}
	}
}

 

 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>TeacherInfoManage</display-name>
  <welcome-file-list>
    <welcome-file>login.jsp</welcome-file>
  </welcome-file-list>
 <servlet>
        <servlet-name>uploadImageAjaxServlet</servlet-name>
        <servlet-class>com.servlet.UploadImageAjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>uploadImageAjaxServlet</servlet-name>
        <url-pattern>/uploadImageAjax</url-pattern>
    </servlet-mapping>
</web-app>

 

 

  • 大小: 224.9 KB
0
0
分享到:
评论

相关推荐

    【JavaScript源代码】js实现上传图片到服务器.docx

    在JavaScript中实现图片上传到服务器的过程通常涉及到前端的文件选取、本地预览、Base64编码,以及与后端服务器的交互。以下是对这个过程的详细解析: 1. **前端文件选取**: - HTML部分提供了`...

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

    在JavaScript中,本地图片的预览和上传到服务器是一个常见的需求,特别是在Web应用中,比如社交媒体、博客编辑器或者在线图像处理工具。本项目着重于实现这个功能,提供了源码和工具来帮助开发者轻松实现这一过程。...

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

    在图片上传中,JS通常用于处理用户选择文件后在本地预览图片,验证文件类型和大小,以及提供一个友好的用户体验,如进度条显示上传进度。 1. **图片预览**:使用HTML5的FileReader API,开发者可以读取用户选择的...

    js图片上传并预览图片

    在JavaScript中实现图片上传并预览功能是一项常见的前端任务,主要涉及到HTML5的...以上是实现“js图片上传并预览图片”的主要技术点和步骤,理解并掌握这些知识点,可以构建出稳定且用户体验良好的图片上传预览功能。

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

    它允许用户在实际上传之前查看图片效果,并且还能进行图片剪切操作,所有这些都在本地完成,无需将图片数据发送到服务器,从而提高了效率并降低了服务器负载。 首先,jQuery是一个广泛使用的JavaScript库,它简化了...

    js图片上传预览效果

    4. **预览图片**:`FileReader`的`onload`事件回调中,将`data URL`设置到`&lt;img&gt;`标签的`src`属性,实现图片预览。 5. **服务器交互**:如果需要服务器端生成预览图,可以使用`XMLHttpRequest`或`fetch`发送图片...

    通过网页上传图片到服务器删的源代码

    FCKeditor提供了完整的前端上传组件,包括图片预览、上传、管理等功能,并且服务器端也有相应的API来处理文件操作。 总结起来,网页上传图片到服务器涉及前端与后端的协作,前端负责用户交互和文件传输,后端负责...

    angularjs实现上传图片并且预览

    2. **图片预览**:在用户选择图片后,我们可以在页面上实时预览图片。这可以通过JavaScript的FileReader API实现。在AngularJS的控制器中,我们可以添加一个方法来处理预览: ```javascript $scope.uploadImage = ...

    js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器不兼容

    这个标题提到的"js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器",表明这是一个旨在解决浏览器兼容性问题的解决方案,涵盖了老版本的Internet Explorer(IE6到IE9)以及Firefox、Chrome、Opera...

    上传图片并且预览

    在网页开发中,"上传图片并且预览"是一项常见的功能,尤其在用户需要上传个人头像、产品照片或分享图片内容时。这个功能涉及到HTML、JavaScript以及可能的服务器端处理。接下来,我们将深入探讨实现这一功能所需的...

    上传图到服务器保存数据库

    在IT行业中,将图片上传至服务器并保存到数据库是一项常见的操作,这涉及到多个技术环节,包括前端文件上传、后端处理、数据库存储以及文件的在线预览和下载功能。以下是对这一过程的详细阐述: 首先,前端部分通常...

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

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

    js上传图片预览

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

    详解nodejs实现本地上传图片并预览功能(express4.0+)

    写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览。前端采用通过...

    flash+js可预览图片批量上传

    "Flash+JS可预览图片批量上传"的实现方式结合了两种技术,为用户提供了一个方便、高效的文件上传体验。在这个解决方案中,Flash作为前端交互层,用于处理图片预览和多文件选择,而JavaScript则用于提供页面动态交互...

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

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

    多张图片上传到服务器

    在IT行业中,多张图片上传到服务器是一项常见的需求,尤其在社交媒体、电商平台或者内容管理系统等应用中。这个“多张图片上传到服务器”的项目提供了一个示例,它可以帮助开发者理解并实现这一功能。通过分析标题和...

    最新C#多图片js上传.rar

    该项目专注于使用JavaScript(js)进行多图片异步上传,并且具备图片预览、预览图片移除以及防止重复上传等功能。这里我们将详细讨论这些知识点。 首先,**多图片上传**是一种常见的需求,特别是在社交媒体、电子...

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

    对于每个图片文件,我们可以创建一个预览图并将其添加到已上传图片列表中: ```javascript for (var i = 0; i ; i++) { var file = files[i]; var reader = new FileReader(); reader.onload = function(e) { ...

    .Net图片上传预览

    在.NET开发环境中,图片上传预览功能是常见的需求,它允许用户在上传图片到服务器之前进行查看和确认,提升用户体验。下面将详细讲解如何实现这一功能。 首先,我们需要理解图片预览的基本原理。图片预览通常涉及到...

Global site tag (gtag.js) - Google Analytics