JavaScript实现单张图片上传功能
前台jsp代码
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<title>单张图片上传</title>
<link rel="stylesheet" type="text/css" href="/css/upload/uploadImg.css">
<script type="text/javascript" src="/js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="/js/layer/layer.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div style="height: 500px;">
<div class="img-box">
<img src="" id="yushow"/>
<button class="btn-uploading" onclick="uploadBtn();"><i class="icon-uploading"></i>上传图片</button>
<a class="shan" onclick="deleteImg();"><img src="/images/upload/shanI.gif"></a>
</div>
<input type="file" name="file" style="display:none;" onchange="previewImg(this);" id="upload" accept="image/*"/>
</div>
</body>
<script type="text/javascript"> function uploadBtn(){
$("#upload").click();
} //图片预览
function previewImg(imgFile){
console.log(imgFile);//这里打印出是整个input标签
var extension = imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);//扩展名
extension = extension.toLowerCase();//把文件扩展名转换为小写
if ((extension!='.jpg')&&(extension!='.gif')&&(extension!='.jpeg')&&(extension!='.png')&&(extension!='.bmp')){
layer.msg("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
$(".btn-uploading").focus();//将焦点定位在文件上传的按钮上，可以直接按确定键再次触发
}else{
var path;//预览地址
if(document.all){//IE
imgFile.select();
path = document.selection.createRange().text;
}else{//火狐，谷歌
path = window.URL.createObjectURL(imgFile.files[0]);
}
$("#yushow").attr("src",path);//设置预览地址
uploadImg(imgFile);
}
} //开始上传
function uploadImg(imgFile){
//获取图片文件
var file = imgFile.files[0];//文件对象
var name = file.name;//图片名
//var size = file.size;//图片大小
//var type = file.type;//文件类型 //检测浏览器对FileReader的支持
if(window.FileReader) {
var reader = new FileReader();
reader.onload = function(){//异步方法,文件读取成功完成时触发
var dataImg = reader.result;//文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果
syncUpload(name,dataImg);
};
reader.readAsDataURL(file);//将文件读取为 DataURL
}else {
layer.msg("浏览器不支持H5的FileReader!");
}
} function syncUpload(name,dataImg){
var imgFile = dataImg.replace(/\+/g,"#wb#");//将所有“+”号替换为“#wb#”
imgFile = imgFile.substring(imgFile.indexOf(",")+1);//截取只保留图片的base64部分,去掉了data:image/jpeg;base64,这段内容
imgFile = encodeURIComponent(imgFile);//把字符串作为 URI 组件进行编码。后台容器会自动解码一次
name = encodeURIComponent(encodeURIComponent(name));//这里对中文参数进行了两次URI编码，后台容器自动解码了一次，获取到参数后还需要解码一次才能得到正确的参数内容
var mydata = "method=uploadImg&imgFile="+imgFile+"&imgName="+name;
$.ajax({
url: "/UploadServlet",
data: mydata,
type: "post",
dataType: "json",
success: function(data){
if(data.state == 'ok'){
document.getElementById("upload").value = "";//重置文件域
layer.msg(data.msg);
}else if(data.state == 'error'){
layer.msg(data.msg);
}
}
});
} //删除图片
function deleteImg(){
$.ajax({
url: "/UploadServlet",
data: "method=deleteImg",
type:"post",
dataType: "json",
success: function(data){
if(data.state == 'ok'){
layer.msg(data.msg);
}else if(data.state == 'error'){
layer.msg(data.msg);
}
}
});
}
</script>
</html>
后台Servlet代码
package com.demo.servlet; import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLDecoder; 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 net.sf.json.JSONObject;
import sun.misc.BASE64Decoder; /**
* 文件上传Servlet
*/
@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public UploadServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
String method = request.getParameter("method");
if (method != null) {
if (method.equals("uploadImg")) {
this.uploadImg(request,response);
}else if (method.equals("deleteImg")) {
this.deleteImg(request, response);
}
}else {//当不能从request中直接获取到数据的时候需要从流中读取
try {
BufferedReader br = request.getReader();
String line = null;
StringBuffer sb = new StringBuffer();
while((line = br.readLine())!=null){
sb.append(line);
}
String params = sb.toString();
if(params.contains("method")){
request.setAttribute("params", params);
if (params.contains("uploadImg")){
this.uploadImg(request,response);
} else if (params.contains("deleteImg")){
this.deleteImg(request, response);
}
return;
} else {
response.getWriter().print("missing parameter 'method'!");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
response.getWriter().close();
} catch (Exception e) {}
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 上传图片
* @param request
* @param response
*/
private void uploadImg(HttpServletRequest request,HttpServletResponse response) {
try {
System.out.println("=================《《图片开始上传》》===================");
response.setContentType("text/html;charset=utf-8");
String imgFile = request.getParameter("imgFile");
String imgName = request.getParameter("imgName"); //request中没获取到参数时的处理
if (imgFile == null || imgName == null ) {
String params = (String)request.getAttribute("params");
if (params != null && imgFile == null && params.indexOf("imgFile=") != -1){
imgFile = params.substring(params.indexOf("imgFile=") + "imgFile=".length(), params.indexOf("&imgName="));
}else {
System.out.println("imgFile参数错误");
response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'imgFile参数错误'}").toString());
return;
}
if (params != null && imgName == null && params.indexOf("imgName=") != -1) {
imgName = params.substring(params.indexOf("imgName=") + "imgName=".length());
}else {
System.out.println("imgName参数错误");
response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'imgName参数错误'}").toString());
return;
}
}
//对参数为空进行判断
if ("".endsWith(imgFile.trim()) || "".endsWith(imgName.trim())) {
System.out.println("参数为空");
response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'参数为空'}").toString());
return;
} imgName = URLDecoder.decode(imgName,"utf-8");//前面进行了两次编码，这里需要用解码器解码一次
//String path = "/site/images"+File.separator+imgName;//Linux文件保存路径
String path = "F:\\site\\images"+File.separator+imgName;//Windows文件保存路径 //File file = new File("/site/images");
File file = new File("F:\\site\\images");
if(!file.exists() && !file.isDirectory()){//如果文件夹不存在则创建
System.out.println("文件目录不存在，开始创建");
//file.mkdirs();//生成所有目录
//file.mkdir();//生成最后一层目录
if (!file.mkdirs()) {
System.out.println("文件目录创建失败");
response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'文件目录创建失败'}").toString());
return;
}
} FileOutputStream os = new FileOutputStream(path);
imgFile = imgFile.replaceAll("#wb#", "+");
BASE64Decoder decoder = new BASE64Decoder();
byte[] b = decoder.decodeBuffer(imgFile);
for(int i=0;i< b.length;++i){
if(b[i]< 0){//调整异常数据
b[i]+=256;
}
}
InputStream is = new ByteArrayInputStream(b);
int len = 0;
while((len=is.read(b))!=-1){
os.write(b,0,len);
}
os.close();
is.close();
System.out.println("上传成功,文件保存在："+path);
response.getWriter().print(JSONObject.fromObject("{'state':'ok','msg':'上传成功'}").toString());
} catch (Exception e) {
e.printStackTrace();
try {
response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'"+e.getMessage()+"'}").toString());
} catch (IOException e1) {
e1.printStackTrace();
}
} }
/**
* 删除图片
* @param request
* @param response
*/
private void deleteImg(HttpServletRequest request,HttpServletResponse response) {
try {
System.out.println("=================《《图片开始删除》》===================");
String path = request.getParameter("path");
if (path == null || "".endsWith(path.trim())) {
System.out.println("path参数错误");
response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'path参数错误'}").toString());
return;
}
//删除文件
File file = new File(path);
//路径存在并且为文件则进行删除
if (file.exists() && file.isFile()) {
file.delete();
System.out.println("删除成功,文件路径："+path);
response.getWriter().print(JSONObject.fromObject("{'state':'ok','msg':'删除成功'}").toString());
}
} catch (Exception e) {
e.printStackTrace();
try {
response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'"+e.getMessage()+"'}").toString());
} catch (IOException e1) {
e1.printStackTrace();
}
}
} }
css样式表文件
.img-box{
margin:0 auto;
top:50%;
width: 500px;
height: 250px;
position:relative;
background: rgb(249,249,249);
border: 1px solid rgb(197, 190, 190);
}
.img-box img{
max-width: 100%;
max-height: 100%;
position: absolute;/*绝对定位*/
top:50%;
left: 50%;
-webkit-transform: translate(-50%,-50%); /*-webkit-是厂商前缀*/
-ms-transform: translate(-50%,-50%); /*-ms-是厂商前缀*/
transform: translate(-50%,-50%);/*translate是移动属性，两个-50%代表着像原始位置向左、向上各移动50%*/
}
.btn-uploading{
width: 112px;
background-color: #3598db;
font-size: 15px;
line-height: 38px;
color: #fff;
position:absolute;
top:50%;
margin-top:-16px;
left: 50%;
margin-left: -62px;
text-align: center;
border-radius: 3px;
z-index:;
cursor: pointer;
}
.icon-uploading{
width: 27px;
height: 27px;
display: inline-block;
background: url(/images/upload//upload.png) no-repeat;
position: relative;
top:6px;
}
.shan{
position: absolute;
right:2px;
bottom:5px;
width: 9px;
height: 12px;
cursor:pointer;
}
button{
outline: none;
border:0 none;
}
页面效果
如果想了解多张图片的上传：可参考另一篇博客：JavaScript实现多张图片上传功能
JavaScript实现单张图片上传功能的更多相关文章
- PHP语言学习之php做图片上传功能
本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...
- JavaScript实现多张图片上传功能
今天闲着没事,把之前的多张图片上传代码整理了下. 页面主要代码: <div class="upBox upBox2"> <div class="d1&q ...
- 前端丨如何使用 tcb-js-sdk 实现图片上传功能
前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...
- thinkphp达到UploadFile.class.php图片上传功能
片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇（七）图片上传功能
日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...
- [Ting's笔记Day8]活用套件carrierwave gem:（3）Deploy图片上传功能到Heroku网站
前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...
- H5 利用vue实现图片上传功能。
H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...
- 给DEDECMS广告管理中增加图片上传功能
dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...
- vue 图片上传功能
这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> ...
随机推荐
- mvc:view-controller标签使用
mvc:view-controller可以在不需要Controller处理request的情况,转向到设置的View,完成无Controller的path和view的直接映射. 1.重定向 <m ...
- Delphi TXLSReadWriteII导出Excel
TXLSReadWriteII导出Excle (有点复杂,可以自己简化一下,直接从项目中抓取的) procedure TformSubReport.DataToExcel(_Item: Integer ...
- python sqlparse 各种 token
https://blog.csdn.net/qq_39607437/article/details/79620383 import sqlparse def look(statement): prin ...
- python学习Day1 计算机原理编程思维
一.学习思想:3W+1H 学什么(what).为什么学(why).用在哪里(where).怎么用(how) 学习编程语言重在代码量.代码量.代码量! 二.计算机五大组成部分,三大核心: 五大组成部 ...
- springboot @scheduled 并发
本文介绍如何使用springboot的sheduled实现任务的定时调度,并将调度的任务实现为并发的方式. 1.定时调度配置scheduled 1)注册定时任务 package com.xiaoju. ...
- vue踩坑(一):打包上线
找到config→index.js 然后找到index.js的buildassetsPublicPath 这个修改为你的项目放在服务器的路径 像我的项目是放在wap 文件夹下的 这些配置完成后然后 ...
- 【POJ2778】DNA Sequence 【AC自动机，dp，矩阵快速幂】
题意 题目给出m(m<=10)个仅仅由A,T,C,G组成的单词(单词长度不超过10),然后给出一个整数n(n<=2000000000),问你用这四个字母组成一个长度为n的长文本,有多少种组 ...
- FastCGI与PHP
什么是CGI CGI全称"通用网关接口"(Common Gateway Interface),用于HTTP服务器与其它机器上的程序服务通信交流的一种工具,CGI程序须运行在网络服务 ...
- 回忆Partition算法及利用Partition进行快排
一.Partiton算法 Partiton算法的主要内容就是随机选出一个数,将这个数作为中间数,将大于它的排在它右边,小于的排在左边(无序的). int partition (int arr[],in ...
- 【网络编程】服务端产生大量的close_wait状态的进程分析
首先要明白close_wait状态是在tcp通信四次握手时的一个中间状态: 即当被动关闭方发送完ACK后进入的状态.这个状态的结束,即要达到下一个状态LASK_ACK需要在发无端发送完剩余的数据后(s ...