ASP.NET图片上传实例（附源码）
由于需要图片上传的功能，所以花了一些时间网上找相关资料终于搞定，效果图如下：
下面的是解决方案截图和上传的图片截图：
下面是代码：
1.界面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadPic.aspx.cs" Inherits="Pic_Try.UploadPic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>图片上传和显示</title>
<style type="text/css">
.pic_text{ color:Red;}
.pic_label { color:Gray; margin-top:5px; margin-bottom:5px;}
.pic_image { margin:5px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="pic_image"><asp:Image ID="pic" runat="server" /></div>
<div><asp:FileUpload ID="pic_upload" runat="server" /><asp:Label ID="lbl_pic" runat="server" class="pic_text"></asp:Label></div>
<div class="pic_label">上传图片格式为.jpg, .gif, .bmp,.png,图片大小不得超过8M</div>
<div><asp:Button ID="btn_upload" runat="server" Text="上传" onclick="btn_upload_Click"/></div>
</form>
</body>
</html>
2.后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Security.Cryptography;
using System.Web.Security;
namespace Pic_Try
{
public partial class UploadPic : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btn_upload_Click(object sender, EventArgs e)
{
Boolean fileOk = false;
if (pic_upload.HasFile)//验证是否包含文件
{
//取得文件的扩展名,并转换成小写
string fileExtension = Path.GetExtension(pic_upload.FileName).ToLower();
//验证上传文件是否图片格式
fileOk = IsImage(fileExtension);
if (fileOk)
{
//对上传文件的大小进行检测，限定文件最大不超过8M
if (pic_upload.PostedFile.ContentLength < 8192000)
{
string filepath = "/images/";
if (Directory.Exists(Server.MapPath(filepath)) == false)//如果不存在就创建file文件夹
{
Directory.CreateDirectory(Server.MapPath(filepath));
}
string virpath = filepath + CreatePasswordHash(pic_upload.FileName, 4) + fileExtension;//这是存到服务器上的虚拟路径
string mappath = Server.MapPath(virpath);//转换成服务器上的物理路径
pic_upload.PostedFile.SaveAs(mappath);//保存图片
//显示图片
pic.ImageUrl = virpath;
//清空提示
lbl_pic.Text = "";
}
else {
pic.ImageUrl = "";
lbl_pic.Text = "文件大小超出8M！请重新选择！";
}
}
else {
pic.ImageUrl = "";
lbl_pic.Text = "要上传的文件类型不对！请重新选择！";
}
}
else
{
pic.ImageUrl = "";
lbl_pic.Text = "请选择要上传的图片！";
}
}
/// <summary>
/// 验证是否指定的图片格式
/// </summary>
/// <param name="str"></param>
/// <returns></returns>
public bool IsImage(string str) {
bool isimage = false;
string thestr = str.ToLower();
//限定只能上传jpg和gif图片
string[] allowExtension = { ".jpg", ".gif", ".bmp",".png" };
//对上传的文件的类型进行一个个匹对
for (int i = 0; i < allowExtension.Length; i++)
{
if (thestr == allowExtension[i])
{
isimage = true;
break;
}
}
return isimage;
}
/// <summary>
/// 创建一个指定长度的随机salt值
/// </summary>
public string CreateSalt(int saltLenght)
{
//生成一个加密的随机数
RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider();
byte[] buff = new byte[saltLenght];
rng.GetBytes(buff);
//返回一个Base64随机数的字符串
return Convert.ToBase64String(buff);
}
/// <summary>
/// 返回加密后的字符串
/// </summary>
public string CreatePasswordHash(string pwd, int saltLenght)
{
string strSalt = CreateSalt(saltLenght);
//把密码和Salt连起来
string saltAndPwd = String.Concat(pwd, strSalt);
//对密码进行哈希
string hashenPwd = FormsAuthentication.HashPasswordForStoringInConfigFile(saltAndPwd, "sha1");
//转为小写字符并截取前16个字符串
hashenPwd = hashenPwd.ToLower().Substring(0, 16);
//返回哈希后的值
return hashenPwd;
}
}
}
3.最后防止上传大文件图片时报错，配置文件添加配置
<?xml version="1.0" encoding="utf-8"?> <!-- 如何配置 ASP.NET 应用程序的详细消息 --> <configuration> <system.web> <compilation debug="true" targetFramework="4.0" /> <httpRuntime executionTimeout="240" maxRequestLength="8192000"/> </system.web> </configuration>
ASP.NET图片自动上传和局部刷新显示的源码下载。
希望大家喜欢这篇文章。
相关推荐
-
asp.net fileupload控件上传图片并预览图片
本文为大家分享了fileupload控件实现上传图片后并进行预览图片的功能,并对web.config进行了配置,先看一下最终效果: 页面代码: <form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1&quo
-
ASP.NET实现上传图片并生成缩略图的方法
本文实例讲述了ASP.NET实现上传图片并生成缩略图的方法.分享给大家供大家参考,具体如下: protected void bt_upload_Click(object sender, EventArgs e) { //检查上传文件的格式是否有效 if (this.UploadFile.PostedFile.ContentType.ToLower().IndexOf("image") < 0) { Response.Write("上传图片格式无效!"); re
-
ASP.NET简单好用功能齐全图片上传工具类（水印、缩略图、裁剪等）
使用方法: UploadImage ui = new UploadImage(); /***可选参数***/ ui.SetWordWater = "哈哈";//文字水印 // ui.SetPicWater = Server.MapPath("2.png");//图片水印(图片和文字都赋值图片有效) ui.SetPositionWater = 4;//水印图片的位置 0居中.1左上角.2右上角.3左下角.4右下角 ui.SetSmallImgHeight = &quo
-
Asp.Net平台下的图片在线裁剪功能的实现代码(源码打包)
1.前台展现实现 网上找到这个jquery.Jcrop,稍看了下,发现它提供的效果完全能满足项目需求. 官方网址:http://deepliquid.com/content/Jcrop.html,感兴趣的朋友可去看看. 页面先引用相关样式和脚本: 复制代码 代码如下: <link href="Styles/jquery.Jcrop.css" rel="stylesheet" type="text/css" /> <script
-
ASP.net WebAPI 上传图片实例
复制代码 代码如下: [HttpPost] public Task<Hashtable> ImgUpload() { // 检查是否是 multipart/form-data if (!Request.Content.IsMimeMultipartContent("form-data")) throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); //文
-
基于asp.net实现图片在线上传并在线裁剪功能
1.说明 接上一篇文章asp.net uploadify实现多附件上传功能完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,Asp.Net平台下的图片在线裁剪功能的实现代码(源码打包),大家可以看下 2.组成 首先说明一下代码实现所用到的技术,仅供参考: 开发工具:vs2010 目标框架:.NET Framework3.5 jcrop:Jcrop.js v0.9.12 Uploadify:uploadify-v3.1 Jquery:jquery-1.9
-
asp.net文件上传解决方案（图片上传、单文件上传、多文件上传、检查文件类型）
小编之前也介绍了许多ASP.NET文件上传的解决案例,今天来个asp.net文件上传大集合. 1 使用标准HTML来进行图片上传 前台代码: <body> <form id="form1" runat="server"> <div> <table> <tr> <td colspan="2" style="height: 21px" > 使用标准HTML来进
-
asp.net图片上传实例
第一.图片上传,代码如下:xxx.aspx 复制代码 代码如下: <td class="style1"> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1" runat="server" Text="上传一
-
Asp.Net上传图片同时生成高清晰缩略图
在asp.net中,上传图片功能或者是常用的,生成缩略图也是常用的.baidu或者google,c#的方法也是很多的,但是一用却发现缩略图不清晰啊,缩略图片太大之类的事情,下面是我在处理图片上的代码,效果不错,所以拿出来分享,(效果能达到一些绘图软件的效果) 代码如下: /// <summary> /// asp.net上传图片并生成缩略图 /// </summary> /// <param name="upImage">HtmlInputFile控
-
ASP.NET图片上传实例（附源码）
由于需要图片上传的功能,所以花了一些时间网上找相关资料终于搞定,效果图如下: 下面的是解决方案截图和上传的图片截图: 下面是代码: 1.界面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadPic.aspx.cs" Inherits="Pic_Try.UploadPic" %> <!DOCTYPE html PUBLIC &q
-
Thinkphp整合阿里云OSS图片上传实例代码
Thinkphp3.2整合阿里云OSS图片上传实例,图片上传至OSS可减少服务器压力,节省宽带,安全又稳定,阿里云OSS对于做负载均衡非常方便,不用传到各个服务器了 首先引入阿里云OSS类库 <?php namespace Home\Controller; use Think\Controller; use OSS\Core\OssException; vendor('aliyun.autoload'); 上传图片自己写,上传成功到阿里云后,删除临时文件 function aliyun() {
-
Vue移动端右滑屏幕返回上一页附源码下载
有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验.Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件.使用它可以轻松实现屏幕触控.滑动触发事件,提高用户体验.本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页. 查看演示 下载源码 安装依赖 使用npm安装vue-directive-touch组件. npm install vue-directive-touch --save 引入组件 在main.js中引入vue-directive-touch.
-
asp.net 文件上传实例汇总
ASP.NET依托.net framework类库,封装了大量的功能,使得上传文件非常简单,主要有以下三种基本方法. 方法一:用Web控件FileUpload,上传到网站根目录. Test.aspx关键代码: 复制代码 代码如下: <form id="form1" runat="server"> <asp:FileUpload ID="FileUpload1" runat="server" />
-
Symfony2使用第三方库Upload制作图片上传实例详解
本文实例分析了Symfony2使用第三方库Upload制作图片上传的方法.分享给大家供大家参考,具体如下: 我们在应用程序或者网站的个人资料里一般都有设置头像的功能,这一章我们在Symfony2里用第三方的一个比较有名Upload库来制作上传图片的功能. 一.安装第三方库 1.在composer.json文件中的"require"中加入 "codeguy/upload": "*" 2.运行指令安装 composer update 二.编码 1.编
-
php图片上传类 附调用方法
本文实例为大家分享php图片上传类,供大家参考,具体内容如下 调用方法: <?php header("Content-Type:text/html; charset=utf-8"); //类的实例化: include("uppoo.php");//类的文件名是upoop.php $up=newupphoto; $submit=$_POST['submit']; if($submit=="上传"){ $up->get_ph_tmpnam
-
php多个文件及图片上传实例详解
本文实例讲述了php多个文件及图片上传的方法.分享给大家供大家参考.具体实现方法如下: 多个文件上传是在单文件上传的基础上利用遍历数组的方式进行遍历表单数组然后把文件一个个上传到服务器上了,下面就来看一个简单多个文件上传实例 多个文件上传和单独文件上传的处理方式是一样的,只需要在客户端多提供几个类型为"file"的输入表单,并指定不同的"name"属性值.例如,在下面的代码中,可以让用户同时选择三个本地文件一起上传给服务器,客户端的表单如下所示: 复制代码 代码如下
-
ajax +NodeJS 实现图片上传实例
前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note(注意) 大家先在public目录下创建一个名为uploads的文件夹,这个文件夹是用来保存你上传过的图片 安装multer模块: npm i -S multer code(代码) 1.app.js const express = require('express'); const multer = requi
-
Android OkHttp 结合php 多图片上传实例
今天写项目的时候需要多图片上传,就用okhttp简单写一个例子. public class MainActivity extends AppCompatActivity { private OkHttpClient client; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_ma