打开图片url默认预览

2024-09-03

实现浏览器打开图片的url默认是下载

在返回的response里面设置HTTP头的Content-Disposition=attachement;filename=xxxx,即可实现文件另存为"xxxx":Content-Disposition=attachement则按照原文件名另存为的下载模式,可以满足开发者的不同需求:

在网页上,如果我们下载的地址对应的是一个jpg文件,txt文件等,点击链接时,浏览器默认的是打开这些文件而不是下载,那么如何才能实现默认下载呢? 后端解决这就是Content-Disposition设置的问题,如下都是java示例: 设置为inline,如果浏览器支持该文件类型的预览,就会打开,而不是下载: response.setHeader("Content-Disposition", "inline; filename=111.jpg"); 设置为attac

兼容好的JS图片上传预览代码

转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>本地图片预览</title> <style type="text/css"> #preview{width:100px;height:100px;b

设置sublime text2/3中默认预览浏览器快捷键的方法

各位前端大神们,大家在用IDE编辑器的时候喜欢用哪些呢?是Dreamweaver.Zend Studio.editplus又或者是sublime text?今天马浩周给大家就要说说设置sublime text2/3中默认预览浏览器快捷键的方法了,可能你早都设置了,(设置好的自动忽略).此篇文章讲给sublime text的使用新手们. 我们为什么要设置默认的预览浏览器呢?因为搞前端的都知道,你在预览的时候不可能只预览一个浏览器,可能需要多个,当然今天我们举例中会说道谷歌浏览器Chrome,IE浏

ASP.NET工作笔记之一：图片上传预览及无刷新上传

转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上传一些封面,然后我就想当选择图片的时候,右边出现预览图(在没有上传到服务器的情况下),当点击上传的时候在上传到服务器(无刷新上传),所以也就找了些资料,做了下这方面的功能. 折腾着,折腾着,也就折腾出来啦.现在在这写个笔记. 首先是预览功能,使用了cloudgamer的JavaScript 图片上传

js实现图片上传预览及进度条

原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type="file">默认的样式: 2:图片从本地选择后,立即预览图片: 3:使用上传可以查看上传进度(本博做的是上传的百分比,做成进度条类似): 先看效果图: 做完的效果图如下: 首先是去除浏览器默认上传图片框,这个不是设置的css,再者<input type="file&

搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)

onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回调,当图片加载完成后执行onload绑定的函数. 给下面一个例子,解释下: document.getElementById('load').onclick = function() { var img = new Image(); img.src="images/avatar.png";

图片上传预览，兼容IE

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

用html5文件api实现移动端图片上传&预览效果

想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继承于它,它提供以下属性: type:mime类型,如果是未知类型则返回一个空字符串 size:Blob对象的字节长度 2.input(type=“file”)控件与file&FileList对象 <input type="file" accept="image/*”

移动端 js 实现图片上传预览

方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> /

mpvue 图片上传预览组件封装

<template> <div class="j-pic-upload"> <div class="j-upload-btn" @click="uploadImg()" :style="{'width':width || '120rpx','height':height || '120rpx'}"> <span class="j-upload-add">+&l

FileReader()读取文件、图片上传预览

前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果. 这里我就以 input 和 DataTransfer 两个方式来讲解 Fi

HTML5开发笔记：图片上传预览

我们知道通过<input type="file">可以用来进行一个图片或者文件的上传,然而浏览器自带的一个缩略图预览的功能其实是相当不美观的,很多时候我们希望可以在上传图片之前对自己上传的图片进行一个预览,早些年我们会通过这个input上关联一个onchange的事件,然后通过ajax来进行一个图片的上传后,在回调的js函数中更新掉图片的路径来达到预览的效果.然而H5给到我们一个更好的解决方案,通过纯js的操作来调用出这张“准备”上传的图片: <form> &l

MWeb 1.4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览

之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) 上的软件,都不能对软件自己的沙箱之外的文档进行任何操作,连读取都不能,除非用户明确授权.而用户授权的方式是使用打开.保存对话框.比如说你用 MWeb 打开一个 Markdown 文档,那么 MWeb 就能得到读写这个文档的权限.再比如说你用 MWeb 导出为 HTML 功能,在保存为对话框中选择一个

Jquery图片上传预览效果

uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(this); opts = jQuery.extend({ Img: "ImgPr", Width: 100, Height: 100, ImgType: ["gif", "jpeg", "jpg", "bmp",

[前端 4] 使用Js实现图片上传预览

导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不用改,但我真的忍受不了.结果调兼容性,时间又过去了. 一.HTML页代码 <span style="font-family:KaiTi_GB2312;font-size:18px;"><div> <div class="img-avatar"

html5 图片转base64预览显示

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>html5 图片上传预览</title> <style> #preview { width: 300px; height: 300px; overflow: hidden; } #preview img { width: %; height: %; } </style> &

php 图片上传预览(转)

网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php header("content-Type: text/html; charset=gb2312"); $uptypes=array('image/jpg

js前端实现多图图片上传预览

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //下面用于

12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下放zh_CN.js 4.测试:新建test.jsp 在页面中写一个<textarea></textarea> 在页面引入js文件并在页面加入一段javascript代码编辑器实例: <%@ page language="java" contentType=

input type=file 选择图片并且实现预览效果的实例

为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上传图片,且可以选择多个文件 <input type="file" accept="image/*" multiple="multiple&quo