前端:
<%@ 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>
相关推荐
在JavaScript中实现图片上传到服务器的过程通常涉及到前端的文件选取、本地预览、Base64编码,以及与后端服务器的交互。以下是对这个过程的详细解析: 1. **前端文件选取**: - HTML部分提供了`...
在JavaScript中,本地图片的预览和上传到服务器是一个常见的需求,特别是在Web应用中,比如社交媒体、博客编辑器或者在线图像处理工具。本项目着重于实现这个功能,提供了源码和工具来帮助开发者轻松实现这一过程。...
在图片上传中,JS通常用于处理用户选择文件后在本地预览图片,验证文件类型和大小,以及提供一个友好的用户体验,如进度条显示上传进度。 1. **图片预览**:使用HTML5的FileReader API,开发者可以读取用户选择的...
在JavaScript中实现图片上传并预览功能是一项常见的前端任务,主要涉及到HTML5的...以上是实现“js图片上传并预览图片”的主要技术点和步骤,理解并掌握这些知识点,可以构建出稳定且用户体验良好的图片上传预览功能。
它允许用户在实际上传之前查看图片效果,并且还能进行图片剪切操作,所有这些都在本地完成,无需将图片数据发送到服务器,从而提高了效率并降低了服务器负载。 首先,jQuery是一个广泛使用的JavaScript库,它简化了...
4. **预览图片**:`FileReader`的`onload`事件回调中,将`data URL`设置到`<img>`标签的`src`属性,实现图片预览。 5. **服务器交互**:如果需要服务器端生成预览图,可以使用`XMLHttpRequest`或`fetch`发送图片...
FCKeditor提供了完整的前端上传组件,包括图片预览、上传、管理等功能,并且服务器端也有相应的API来处理文件操作。 总结起来,网页上传图片到服务器涉及前端与后端的协作,前端负责用户交互和文件传输,后端负责...
2. **图片预览**:在用户选择图片后,我们可以在页面上实时预览图片。这可以通过JavaScript的FileReader API实现。在AngularJS的控制器中,我们可以添加一个方法来处理预览: ```javascript $scope.uploadImage = ...
这个标题提到的"js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器",表明这是一个旨在解决浏览器兼容性问题的解决方案,涵盖了老版本的Internet Explorer(IE6到IE9)以及Firefox、Chrome、Opera...
在网页开发中,"上传图片并且预览"是一项常见的功能,尤其在用户需要上传个人头像、产品照片或分享图片内容时。这个功能涉及到HTML、JavaScript以及可能的服务器端处理。接下来,我们将深入探讨实现这一功能所需的...
在IT行业中,将图片上传至服务器并保存到数据库是一项常见的操作,这涉及到多个技术环节,包括前端文件上传、后端处理、数据库存储以及文件的在线预览和下载功能。以下是对这一过程的详细阐述: 首先,前端部分通常...
【标题】"支持批量上传、JS图片预览的前端上传组件"所涉及的知识点主要集中在前端开发领域,尤其是文件上传和用户体验优化上。这个组件设计用于处理用户在Web应用中上传多个文件的需求,同时提供了图片预览功能,...
`readAsDataURL`方法将文件内容转化为Data URL,然后在`onload`事件回调中,将这个URL设置为图片元素的`src`属性,从而实现在页面上预览图片。 此外,还可以添加额外的功能,比如限制上传文件的大小和类型,或者...
写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览。前端采用通过...
"Flash+JS可预览图片批量上传"的实现方式结合了两种技术,为用户提供了一个方便、高效的文件上传体验。在这个解决方案中,Flash作为前端交互层,用于处理图片预览和多文件选择,而JavaScript则用于提供页面动态交互...
在本文中,我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能,并且检查图片的大小,确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用,因为它允许...
在IT行业中,多张图片上传到服务器是一项常见的需求,尤其在社交媒体、电商平台或者内容管理系统等应用中。这个“多张图片上传到服务器”的项目提供了一个示例,它可以帮助开发者理解并实现这一功能。通过分析标题和...
该项目专注于使用JavaScript(js)进行多图片异步上传,并且具备图片预览、预览图片移除以及防止重复上传等功能。这里我们将详细讨论这些知识点。 首先,**多图片上传**是一种常见的需求,特别是在社交媒体、电子...
对于每个图片文件,我们可以创建一个预览图并将其添加到已上传图片列表中: ```javascript for (var i = 0; i ; i++) { var file = files[i]; var reader = new FileReader(); reader.onload = function(e) { ...
在.NET开发环境中,图片上传预览功能是常见的需求,它允许用户在上传图片到服务器之前进行查看和确认,提升用户体验。下面将详细讲解如何实现这一功能。 首先,我们需要理解图片预览的基本原理。图片预览通常涉及到...