图片上传到服务器(实例讲解js如何实现图片粘贴上传到服务器并展示)

编程之家2023-10-2197次浏览

大家好，关于图片上传到服务器很多朋友都还不太明白，今天小编就来为大家分享关于实例讲解js如何实现图片粘贴上传到服务器并展示的知识，希望对各位有所帮助！

实例讲解js如何实现图片粘贴上传到服务器并展示

本文主要为大家带来一篇js实现图片粘贴上传到服务器并展示的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

最近看了一些有关于js实现图片粘贴上传的demo,实现如下:(这里只能检测到截图粘贴和图片右键复制之后粘贴)

demo1:

document.addEventListener('paste', function(event){

console.log(event)

var isChrome= false;

if( event.clipboardData|| event.originalEvent){

//not for ie11某些chrome版本使用的是event.originalEvent

var clipboardData=(event.clipboardData|| event.originalEvent.clipboardData);

if( clipboardData.items){

// for chrome

var items= clipboardData.items,

len= items.length,

blob= null;

isChrome= true;

//items.length比较有意思，初步判断是根据mime类型来的，即有几种mime类型，长度就是几（待验证）

//如果粘贴纯文本，那么len=1，如果粘贴网页图片，len=2, items[0].type='text/plain', items[1].type='image/*'

//如果使用截图工具粘贴图片，len=1, items[0].type='image/png'

//如果粘贴纯文本+HTML，len=2, items[0].type='text/plain', items[1].type='text/html'

// console.log('len:'+ len);

// console.log(items[0]);

// console.log(items[1]);

// console.log('items[0] kind:', items[0].kind);

// console.log('items[0] MIME type:', items[0].type);

// console.log('items[1] kind:', items[1].kind);

// console.log('items[1] MIME type:', items[1].type);

//阻止默认行为即不让剪贴板内容在p中显示出来

event.preventDefault();

//在items里找粘贴的image,据上面分析,需要循环

for(var i= 0; i< len; i++){

if(items[i].type.indexOf("image")!==-1){

//getAsFile()此方法只是living standard firefox ie11并不支持

blob= items[i].getAsFile();

uploadImgFromPaste(blob,'paste', isChrome);

}

/*if( blob!== null){

var reader= new FileReader();

reader.onload= function(event){

// event.target.result即为图片的Base64编码字符串

var base64_str= event.target.result;//获得图片base64字符串

//可以在这里写上传逻辑直接将base64编码的字符串上传（可以尝试传入blob对象，看看后台程序能否解析）

uploadImgFromPaste(base64_str,'paste', isChrome);

}

reader.readAsDataURL(blob);//传入blob对象,读取文件

}*/

} else{

//for firefox

setTimeout(function(){

//设置setTimeout的原因是为了保证图片先插入到p里，然后去获取值

var imgList= document.querySelectorAll('#aaa img'),

len= imgList.length,

src_str='',

for( i= 0; i< len; i++){

if( imgList[i].className!=='my_img'){

//如果是截图那么src_str就是base64如果是复制的其他网页图片那么src_str就是此图片在别人服务器的地址

src_str= imgList[i].src;

}

uploadImgFromPaste(src_str,'paste', isChrome);

}, 1);

}

} else{

//for ie11

setTimeout(function(){

var imgList= document.querySelectorAll('#aaa img'),

len= imgList.length,

src_str='',

for( i= 0; i< len; i++){

if( imgList[i].className!=='my_img'){

src_str= imgList[i].src;

}

uploadImgFromPaste(src_str,'paste', isChrome);

}, 1);

}

})

//调用图片上传接口,将file文件以formData形式上传

function uploadImgFromPaste(file, type, isChrome){

var formData= new FormData();

formData.append('files', file);

formData.append('submission-type', type);

var xhr= new XMLHttpRequest();

xhr.open('POST','/upload_editor_photo3');

xhr.onload= function(){

console.log(xhr.readyState);

if( xhr.readyState=== 4){

if( xhr.status=== 200){

var data= JSON.parse(xhr.responseText),

editor= document.getElementById('aaa');

if( isChrome){

var len=data.data.length;

for( var i= 0; i< len; i++){

var img= document.createElement('img');

img.className='my_img';

img.src= data.data[i];//设置上传完图片之后展示的图片

editor.appendChild(img);

}

} else{

var imgList= document.querySelectorAll('#aaa img'),

len= imgList.length,

for( i= 0; i< len; i++){

if( imgList[i].className!=='my_img'){

imgList[i].className='my_img';

imgList[i].src= data.data[i];

}

} else{

console.log( xhr.statusText);

}

};

xhr.onerror= function(e){

console.log( xhr.statusText);

}

xhr.send(formData);

}demo2:

//处理粘贴事件

$("#aaa").on('paste', function(eventObj){

//处理粘贴事件

var event= eventObj.originalEvent;

var imageRe= new RegExp(/image\/.*/);

var fileList=$.map(event.clipboardData.items, function(o){

if(!imageRe.test(o.type)){ return}

var blob= o.getAsFile();

return blob;

});

if(fileList.length<= 0){ return}

upload(fileList);

//阻止默认行为即不让剪贴板内容在p中显示出来

event.preventDefault();

});

function upload(fileList){

for(var i= 0, l= fileList.length; i< l; i++){

var fd= new FormData();

var f= fileList[i];

fd.append('files', f);

var editor=document.getElementById("aaa");

$.ajax({

url:"/upload_editor_photo3",

type:'POST',

dataType:'json',

data: fd,

processData: false,

contentType: false,

xhrFields:{ withCredentials: true},

headers:{

'Access-Control-Allow-Origin':'*',

'Access-Control-Allow-Credentials':'true'

success: function(res){

var len=res.data.length;

for( var i= 0; i< len; i++){

var img= document.createElement('img');

img.src= res.data[i];//设置上传完图片之后展示的图片

editor.appendChild(img);

}

error: function(){

alert("上传图片错误");

}

});

}

}注意:因为只支持右键复制图片,所以并不能一下复制两张图片,所有图片复制并粘贴上传待研究.

html:

<p id="aaa" contentEditable="true" style="height:800px;border:1px solid#ccc"></p>接口返回数据格式:

{

// errno即错误代码，0表示没有错误。

//如果有错误，errno!= 0，可通过下文中的监听函数 fail拿到该错误码进行自定义处理

errno: 0,

// data是一个数组，返回若干图片的线上地址

data: [

'图片1地址',

'图片2地址',

'??'

]

}大家学会了吗？赶紧动手尝试一下吧。

如何把图片发布到远程

在图片服务器建立一个FTP服务器就可以了。

如果图片服务器没有外部IP，只有WEB有，在WEB上面做 21端口转发到图片服务器就可以了。

只是这样会比较麻烦和复杂。FTP服务器需要考虑主动和被动的模式。

或者用VPN，在图片服务器和客户端连接，这样什么问提都没有了。不过这样会是商业模式。

弄外部IP地址配图片服务器。或者远控带传输文件的软件。

方法狠很多，看你的承受。有技术，有收费，有免费，有安全，有不太安全的。

js如何获取本地图片显示到浏览器并上传至服务器

这篇文章介绍的内容是关于浏览器显示本地图片的预览图，调用后端接口将图片上传至服务器，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

一、jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html>

<head>

<body>

</p>

</select>

</p>

</p>

</p>

</form>

</p>

</p><script>

var imgurl="";

function getPhoto(node){

var imgURL="";

try{

var file= null;

if(node.files&& node.files[0]){

file= node.files[0];

}else if(node.files&& node.files.item(0)){

file= node.files.item(0);

}

//Firefox因安全性问题已无法直接通过input[file].value获取完整的文件路径

try{

imgURL= file.getAsDataURL();

}catch(e){

imgRUL= window.URL.createObjectURL(file);

}

}catch(e){

if(node.files&& node.files[0]){

var reader= new FileReader();

reader.onload= function(e){

imgURL= e.target.result;

};

reader.readAsDataURL(node.files[0]);

}

creatImg(imgRUL);//显示图片

return imgURL;

}

function creatImg(imgRUL){

document.getElementById("userPic").src= imgRUL;

$('#userPic').viewer({

url:'src',

});

}

//保存

function saveUser(){

//数据判断

var realName=$("#realName").val(); if(realName==null||realName==''){

layer.msg('用户名不能为空!',{icon: 7,time:1000}); return;

} var imgSrc=$("#userPic").attr("src"); if(imgSrc==""|| imgSrc==null){

layer.msg('请上传图片!',{icon: 7,time:1000}); return;

} var formData= new FormData($("#uploadForm")[0]);

$.ajax({

url:"../addUser",

type:'POST',

data: formData,

async: false,

cache: false,

contentType: false,

processData: false,

success: function(data){

var obj= JSON.parse(data);

layer.msg('保存成功!',{icon: 6,time: 2000});

error: function(data){

layer.msg('保存失败!',{icon: 5,time: 2000});

}

});

}</script>

</body></html>二、controller接口

/**

*添加用户

*@param session

*@param request

*@param response

*@throws IOException

@RequestMapping(value="/addUser", method= RequestMethod.POST)

public void addUser(MultipartFile entImg,HttpSession session, HttpServletRequest request, HttpServletResponse response)

throws IOException{

String realName= request.getParameter("realName");//姓名

String gender= request.getParameter("gender");//性别

//调用工具类上传图片

String userPic= FileUtils.uploadUser(entImg, request);

TestUser testUser= new TestUser();

testUser.setRealName(realName);

testUser.setGender(Integer.parseInt(gender));

testUser.setUserPic(userPic);//添加人员信息及图片url到数据库

int res= userService.insertUser(testUser); if(res> 0){

writeJSON(response, res);

} else{

writeJSON(response,null);

}

}三、工具类

public class FileUtils{

FILES_PATH("files_path");//此路径存放于jdbc.properties配置文件中，例如：files_path=D:/uploadImgs

private static final String path= PropertiesUtil.get(FILES_PATH)+"/user";/**

*上传图片URL

*@param fileName

*@param request

*@return

public static String getPath(String fileName,HttpServletRequest request){

String ip=IpUtil.getIP(); int port=request.getLocalPort();

StringBuilder sb=new StringBuilder();

sb.append("http://");

sb.append(ip);

sb.append(":");

sb.append(port);

sb.append("/uploadImgs/user/");

sb.append(fileName); return sb.toString();

}/**

*以时间戳对上传文件进行重新命名

*@param file

*@return

public static String renameFile(MultipartFile file){ if(file!=null){

Long date=new Date().getTime();

String fileRealName=file.getOriginalFilename();

String prefix=fileRealName.substring(fileRealName.lastIndexOf(".")+1);

String fileName= date.toString()+"."+prefix;

return fileName;

} return null;

}/**

*图片上传

*@param file

*@param fileName

public static String uploadUser(MultipartFile file, HttpServletRequest request){//重命名

String renameFile= FileUtils.renameFile(file);//图片名

String picPath= FileUtils.getPath(renameFile, request);//上传

File targetFile= new File(borpath, renameFile); if(!targetFile.exists()&&!targetFile.isDirectory()){

targetFile.mkdirs();

} try{

file.transferTo(targetFile);

} catch(Exception e){

e.printStackTrace();

} return picPath;

}

}四、效果

3.图片上传成功后保存至指定文件夹下

4.数据库数据