前台图片上传展示JS（单张图片展示）

javaweb图片上传 tomcat重新部署图片消失

标签: 图片上传tomcat重新部署图片消失原因分析以及解决办法最近在做一个Javaweb的项目,涉及到图片上传,并且需要将图片通过URL回显给JSP页面,在调试的时候发现,上传到tomcat的图片再重新部署之后就消失了.研究了半天发现才解决了.首先说一下,我为什么要将图片存放到tomcat服务器或者更直白点说是web工程目录下的原因: 项目中对于图片的处理在于用户上传比如自己的头像,上传后再查看时,就直接根据服务器的URL指定图片的位置去查看图片,通俗点就是jsp页面中的<img >标…

js 利用iframe和location.hash跨域解决的方法，java图片上传回调JS函数跨域

奶奶的:折腾了我二天,最终攻克了!网上有非常多样例. 但跟我的都不太一样,费话不多说了,上图上代码: IE ,firefix,chrome 測试通过 js :这个主页面,部分代码, function submitUpload(id){ $("#imgSrc" + id +"").attr("alt", "图片上传中--"); var imgID = id; if(id>0){ imgID = 1; } var fo…

从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文本web编辑器,而且全中文API和注释,方便学习和使用.特别是图片上传查看及涂鸦功能极为喜欢,但是有很多情况我们并不需要Web编辑器,而只需要图片上传.那么问题来了,提取图片上传哪家强..... 网上有很多图片上传的控件.插件.但都不是那么的完美,有的只有一张图片上传不包含批量上传,有的没有图片查看…

megapix-image插件使用Canvas压缩图片上传解决手机端图片上传功能的问题

最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用flash实现上传的): 经过研究找到了一个手机端比较相对比较好用的插件实现图片上传,那就是megapix-image插件,比uploadify还是好用多了,下面就来上实例吧: html页面: <html> <body> <input type="file" cap…

大图片上传(ImageIO,注意有的图片不能上传时因为他是tiff格式)

一下是必要的: 1.enctype="multipart/form-data" 2. //不要使用myeclipse自动生成的get.set方法(struts2中的用法) public void setMyFileContentType(String contentType) { System.out.println("contentType : " + contentType); this .contentType = conten…

ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传

自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片.需要用户手动一张张上传Word图片.如果只有一张图片还能够接受,如果图片数量比较多,这种操作就显得非常的麻烦. 1.只粘贴图片并上传到服务器 config.extraPlugins = 'uploadimage'; //config.uploadUrl = '上传路径…

nginx代理图片上传以及访问 nginx 图片上传完整版

nginx代理图片上传首先需要利用nginx代理图片访问参考 https://www.cnblogs.com/TJ21/p/12609017.html 编写接受文件的controller 1 @PostMapping("image") 2 public ResponseEntity<String> uploadImage(MultipartFile file){ 3 4 String url = null; 5 try { 6 url = uploadService.up…

阿里云使用js 实现OSS图片上传、获取OSS图片列表、获取图片外网访问地址(读写权限私有、读写权限公共);

详情请参考:https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.763.ZgC59a 或者https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.762.EmuWIt 这里写的是最简单的写法,只是实现其简单的功能 1.引入js文件 <script src="http://gosspublic.alicdn.com…

阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件

项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传格式,可重复上传. 功能介绍: 1.可批量上传,一次性最多只能上传六张,超过则提示,并清空上传队列. 右上角显示已上传照片数量,满6张,隐藏上传按钮. 2. 限制了照片上传数量,分批上传超过了数量也提示并清空队列. 3.支持图片浏览器回显轮播图片(如上) 4. 支持已上传照片的删除,…

JS判断图片上传时文件大小和图片尺寸

如何读取图片的size: 首先,原生input file控件有个files属性,该属性是一个数组.数组中的元素有以下属性:lastModifiedDate,name,size,type,webkitRelativePath,如图: 这样的话,我们就可以检测到size.(这里的size是字节大小) var fileData = file.files[0]; var size = fileData.size; //注意,这里读到的是字节数 var isAllow = false; var maxSi…

图片上传纯js编码

ie8测试始终不支持,非ie方法一.二都正常 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv=&quo…

dnmp(docker的lnmp)安装WordPress之后图片上传问题问题：图片上传大小问题解决和报错413 Request Entity Too Large

首先是提示超过图片尺寸和大小, 最后发现都是图片大小的问题, 需要修改php的最大上传size 修改之后查看php配置已经生效但是还是报错, 提示返回不是合法的json, 查看控制台, 报错是问题:413 Request Entity Too Large 发现是Nginx的配置, 有盖配置. dnmp环境 php配置直接重新 docker-compose up --build 就可以生效 nginx 需要停止删除重新build才可以, 注意, 停止删除容器, build…

vue图片上传及java存储图片(亲测可用)

1.前言在使用elementui的upload组件时,我一直无法做到上传的图片和其他数据一起提交.单纯的上传文件,java的存储图片的方式也有局限性. 我知道的后端保存图片有两种方式:一种是直接存储到数据库中(base65和blob都能做到),一种是存储在服务器上的一个文件夹,数据库保存图片地址. 开始我选择了base64 但是mysql貌似不允许这么长的存储长度(没有百度直接否掉了),后面就使用存储在服务器上. 2.代码流程是,前端选择好图片并且填充好想要填写的数据,点提交就提交到后台进行…

iOS:图片上传时两种图片压缩方式的比较

上传图片不全面的想法:把图片保存到本地,然后把图片的路径上传到服务器,最后又由服务器把路径返回,这种方式不具有扩展性,如果用户换了手机,那么新手机的沙盒中就没有服务器返回的图片路径了,此时就无法获取之前已经上传了的头像了,在项目中明显的不可行. 上传图片的正确方式:上传头像到服务器一般是将图片NSData上传到服务器,服务器返回一个图片NSString地址,之后再将NSString的路径转为url并通过url请求去更新用户头像(用户头像此时更新的便是NSString) 代码为: AFHTTPRe…

玩转图片上传————原生js XMLHttpRequest 结合FormData对象实现的图片上传

var form=document.getElementById("formId"); var formData=new FormData(form); var oReq = new XMLHttpRequest(); oReq.onreadystatechange=function(){ if(oReq.readyState==4){ if(oReq.status==200){ var json=JSON.parse(oReq.responseText); console.log(j…

前端模拟图片上传---->>通过选取的图片获取其路径<<------

<head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: relative; overflow: hidden; background: #EEE; width: %; height: 667px; } #bg, #mask-bg { position: absolute; width: %; height: 667px; backgr…

图片上传封装类【包括图片上传和缩略图上传】.NET

原文发布时间为:2009-08-30 -- 来源于本人的百度文章 [由搬家工具导入] #region 上传图片及上传缩略图 public class UpFile : System.Web.UI.Page { /// <summary> /// 上传图片jpg/jpeg/gif/bmp格式 /// 创建：2009-06-09 /// 作者：HandBoy /// </summary> …

MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结表达式目录树 “村长”教你测试用例引用provinces.js的三级联动

MVC图片上传详解 MVC图片上传--控制器方法新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFileBase shangchuan){string path = @"\upload\" + DateTime.Now.ToFileTime() + ".jpg";Session["path"] = path;string save = Server.M…

html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

先上效果上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html页面需要引入weui.min.css 不然没法渲染样式, 将下面的代码放在需要上传文件的地方就行了,如果不需要图片旋转功能, 可以直接删掉那个div, 改不改js无影响 addPhoto.html  <div class="weui-cells weui-…

Jquery自定义图片上传插件

1 概述编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2.该图片上传插件实现功能如下: 1>能够异步上传,上传成功之后,服务器返回响应结果:能够定义上传前和上传后自定义处理方式: 2>能够实现文件格式判断,过滤非图片文件: 3>服务端能够过滤重复上传的图片: 3.页面代码分析: 1>.Jquery图片上传插件代码如下: // 选中文件, 提…

微信小程序开发之多图片上传+服务端接收

前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object object) 和wx.chooseImage(Object object)接口,对图片大小和来源进行上传 wx.chooseImage() 概述: 从本地相册选择图片或使用相机拍照,详细了解请阅读微信小程序开发文档(https://developers.weixin.qq.com/minipro…

html图片上传阅览并且点击放大

关闭 qq_31540195的博客目录视图摘要视图订阅异步赠书:9月重磅新书升级,本本经典程序员9月书讯每周荐书:ES6.虚拟现实.物联网(评论送书) html图片上传阅览并且点击放大标签: htmlhtml图片上传预览电机房啊图片 2016-08-12 10:02 661人阅读评论(0) 收藏举报分类: html学习(1) 版权声明:本文为博主原创文章,未经博主允许不得转载. 在做项目的时候用到了…

input type=file实现图片上传，预览以及图片删除

背景前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能的时候,参考了很多网上的代码 , 现在就单独写一篇博客来记录下实现的整个过程,以及在做的过程中遇到的一些坑. 先来看下实现的最后效果: 首先先创建好一个用于展示预览图片及上传按钮的div,content-img-list用于动态展示预览图片,file用于显示上传按钮 <div class="c…

easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁，只能看到自己的图片)

需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href…

Express+MySQL实现图片上传到服务器并把路径保存到数据库中

demo准备:mysql5.7.20 express4.0 处理图片文件的中间件Multer 先搭建服务器并展示html页面 const express = require("express"); const app = express(); app.engine('html',require("html-art-template")) // 安装解析html文件的模板引擎,cnpm i html-art-template -S app.get("/&qu…

html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). v1.4版本已支持秒传+分片上传+断点续传(IE10+.其它标准浏览器),具体请参考Github代码. 上传组件特点轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起…

springmvc上传图片并显示图片--支持多图片上传

实现上传图片功能在Springmvc中很好实现.现在我将会展现完整例子. 开始需要在pom.xml加入几个jar,分别是: <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <depende…

解决uploadify多图片上传部分图片丢失，且不提示任何错误的问题

这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都能成功,且缩略图展示也没有问题,但当我选择多张图片上传时,只有部分图片上传成功,未上传成功的也没有报错,而且奇怪的是后台返回的缩略图地址中居然有未上传成功的图片缩略图,而上传成功的图片的缩略图却不一定会返回正常展示缩略图.而当我在onUploadSuccess事件中弹出alert()时描述的问题居然…

bootstrap-fileinput多图片上传

在页面写一个input框: <input id="subGraphAddress1" name="subGraphAddress" type="file" accept="image/jpg,image/png,image/gif,image/jpeg" /> 页面导入的css和js文件: <link href="/static/assets/bootstrap-fileinput-4.4.8/cs…

百度ueditor的图片上传，前后端交互使用

百度ueditor的使用一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor.config.js即可.这里就不多说. 至于图片上传,ueditor 设计的时候是考虑和后端交互的,所以会看到可以下载什么php,java版本,还有很多网上会说道有什么后端配置文件,改那改这的,但是实际上后端存储业务是按照公司实际来的,实践起来并不顺利. 本文重点讲述的只用前端文件和ueditor.…

【前台图片上传展示JS（单张图片展示）】的更多相关文章