11.27 上传下载 图片预览

代码页面

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{

//1.找到要上传的文件名
string name = FileUpload1.FileName.ToString();

//2.处理文件名 ,防止上传的文件名被覆盖,
string clname = DateTime.Now.ToString("yyyyMMddhhmmssms")+name;

//3.造一个要保存的路径
string path = @"Files\" + clname;

//处理相对路径为绝对路径。是一个映射
string jdpath = Server.MapPath(path);

//5,保存
FileUpload1.SaveAs(jdpath);

}
protected void Button2_Click(object sender, EventArgs e)
{

//1.找到要上传的文件名
string name = PicLoad.FileName.ToString();

//2.处理文件名 ,防止上传的文件名被覆盖,
string clname = DateTime.Now.ToString("yyyyMMddhhmmssms") + name;

//3.造一个要保存的路径
string path = @"image\" + clname;

//处理相对路径为绝对路径。是一个映射
string jdpath = Server.MapPath(path);

//5,保存
PicLoad.SaveAs(jdpath);
}
}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<br />
<asp:FileUpload ID="FileUpload1" runat="server" />
&nbsp;&nbsp;
<asp:Button ID="Button1" runat="server" Text="上传" OnClick="Button1_Click" style="height: 21px" />
<br />
<br />

<asp:FileUpload ID="FileUpload2" runat="server" />
&nbsp;&nbsp;
<asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="上传" />
&nbsp;
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
<br />

<div id="localImag" style="width: 254px; height: 200px">
<img id="preview" alt="点击上传预览图片" src="images/qiye.png" width="200" height="200" />
<asp:FileUpload ID="PicLoad" Height="200px" style="position:relative; top:-200px; opacity:0; left: 0px; width: 249px;" runat="server" onchange="javascript:setImagePreview(this,localImag,preview);"></asp:FileUpload>
</div>
<asp:Button ID="Button3" runat="server" OnClick="Button2_Click" Text="上传" />

<script type="text/javascript">
function setImagePreview(docObj, localImagId, imgObjPreview) {
if (docObj.files && docObj.files[0]) {
//火狐下,直接设img属性
imgObjPreview.style.display = ‘block‘;
imgObjPreview.style.width = ‘200px‘;
imgObjPreview.style.height = ‘200px‘;

//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else {
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;

//必须设置初始大小
localImagId.style.width = "200px";
localImagId.style.height = "200px";

//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter =

"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src

= imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = ‘none‘;
document.selection.empty();
}
return true;
}
</script>

<br />
<br />
<br />
<a href="Files/201512270925202520数据库1.xlsx">下载</a>
</div>
</form>
</body>
</html>

时间: 2024-11-05 20:19:14

11.27 上传下载 图片预览的相关文章

文件上传之图片预览

一.业界现状分析 有时候我们需要在上传图片之前为用户提供图片预览的功能,HTML5规范出来之前,由于缺少原生的File API支持,我们需要借助Flash或者浏览器插件来满足这种需求.有了HTML5,我们可使用URL或者FileReader对象实现预览功能. 二.应用场景 图片分享类的应用,如Flickr,Facebook.相册应用,如:QQ相册. 虽然139邮箱没有合适的应用场景,但是可将技术预研的成果作为技术储备,好东西总有用得着的时候. 三.编码实现 方式一:window.URL (1).

input实现多文件上传及图片预览

通过使用html的input标签可以实现文件上传比如 <input id="file" type="file" name="upload" multiple onchange="showch();"> 其中将type属性设为file. 添加multiple实现多文件上传入下图所示: 通过使用原生js或jQuery就可以获得文件名,文件路径,文件大小等属性 获得文件属性的js代码如下: <script type

dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarDiskFileItemFactory fac = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(fac);upload.setHeaderEncoding("utf-8"); Html代

6.上传前图片预览

1.html 代码: <div class="file-box"> <form action="upload.class.php" id="form_id" method="post" enctype="multipart/form-data" > <input type="file" name="imagename" id="

jquery上传多图片预览

(php+ajax配合) 手机上兼容. 姑姑,过儿学会了......

2016/4/19 ①单个文件上传 ②上传图片后 预览图片

1,f1.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 作业:在网上找上传图片预览的代码 上传服务器 再预览--> <form action="f1chuli.php&q

confluence上传文件附件预览乱码问题(linux服务器安装字体操作)

在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候无法识别文档字体,所以才会出现乱码.还比如某个业务有个功能生成图片,结果图片里的字全变空格了,这也是服务器上没相应的字库造成的.解决办法:在服务器上安装中文字体.操作方法如下: 1)先安装想要的字体, 如楷体等, 从本机"c盘->Windows-Fonts"文件夹里复制simkai字

关于confluence上传文件附件预览查看时出现乱码的问题解决办法

在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候无法识别文档字体,所以才会出现乱码.还比如某个业务有个功能生成图片,结果图片里的字全变空格了,这也是服务器上没相应的字库造成的. 1.解决办法:在服务器上安装中文字体.操作方法如下: 1)先安装想要的字体, 如楷体等, 从本机"c盘->Windows-Fonts"文件夹里复制simk

调起摄像头、上传下载图片、本地展示图片

之前那偏微信JS-SDK授权的文章实现了分享接口,那么这里总结一下如何在微信里面通过js调起原生摄像头,以及上传下载图片. 1.配置 页面引入通过jssdk授权后,传入wx对象,首先配置需要的接口 wx.config({ /* debug: true, */ appId: appid, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'chooseImage',//拍照或从手机相册中选图接口