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

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

大家好，感谢邀请，今天来为大家分享一下js上传图片到服务器的问题，以及和js如何获取本地图片显示到浏览器并上传至服务器的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

使用js向服务器上传文件

（1）js无法向网站服务器传送文件只能用FTP传送文件，（2）是动态网站要用js代码函数与服务器数据库代码建立连接函数。对应数据库，数据，相应单位，通过指定路径传输倒是制定数据单位。例如照片imag数据单位格式标注照片。通过编辑代码任意网络客户端都可上传到数据库imag格式单位标注中.相片.

用js怎么把读取到的图片保存到服务器上

建议楼主从零开始学习吧。。

（1）iis是部署网站的，可以在开始-》运行里面输入 inetmgr，如果没有提示错误，弹出新的管理工具页面，说明你电脑已经装了iis了。。。没有的话，自己百度去搜个，不同版本的windows系统，下载的iis版本也是不一样的。

（2）ftp是文件服务器，没错，做了第一步，第二部就很好做了，iis里面自带一个部署ftp服务器的站点。不懂的话，百度搜“iis ftp站点搭建”

(3)基于后面的js保存图片的东西，这个是需要编程了。。js是纯客户端脚本，不可能上传文件，除非你调用服务端的代码。你可以百度搜js ajax上传文件

最后我猜测楼主是学c#的把。

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.数据库数据