FileUpload 简单上传+小预览

页面代码 :

    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="上传" Width="54px"  OnClick="Button1_Click" />
        <asp:Label ID="Label1" runat="server" Text="" Style="color: Red"></asp:Label>
       <asp:Image runat="server" ID="Image1" Style="z-index: 102; left: 20px; position: absolute;
           top: 49px" Width="73px" />
    </div>
    </form>

后台代码 :

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

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

        }
        #region 文件上传
        /// <summary>
        /// 文件上传
        /// </summary>
        protected void Button1_Click(object sender, EventArgs e)
        {
            if (FileUpload1.FileName == "")
            {
                this.Label1.Text = "上传文件不能为空";
                return;
            }

            bool fileIsValid = false;
            //如果确认了上传文件,则判断文件类型是否符合要求
            if (this.FileUpload1.HasFile)
            {
                //获取上传文件的后缀
                String fileExtension = System.IO.Path.GetExtension(this.FileUpload1.FileName).ToLower();
                String[] restrictExtension = { ".gif", ".jpg", ".bmp", ".png" };
                //判断文件类型是否符合要求
                for (int i = 0; i < restrictExtension.Length; i++)
                {
                    if (fileExtension == restrictExtension[i])
                    {
                        fileIsValid = true;
                    }
                    //如果文件类型符合要求,调用SaveAs方法实现上传,并显示相关信息
                    if (fileIsValid == true)
                    {
                        //上传文件是否大于10M
                        if (FileUpload1.PostedFile.ContentLength > (10 * 1024 * 1024))
                        {
                            this.Label1.Text = "上传文件过大";
                            return;
                        }
                        try
                        {
                            this.Image1.ImageUrl = "~/File/" + FileUpload1.FileName;
                            this.FileUpload1.SaveAs(Server.MapPath("~/File/") + FileUpload1.FileName);
                            this.Label1.Text = "文件上传成功!";
                        }
                        catch
                        {
                            this.Label1.Text = "文件上传失败!";
                        }
                        finally
                        {

                        }
                    }
                    else
                    {
                        this.Label1.Text = "只能够上传后缀为.gif,.jpg,.bmp,.png的文件";
                    }
                }
            }
        }
        #endregion
    }
}

Web.config 配置:

<!--因为FileUpload 控件上传最大为4M,如果要上传更大文件,改下maxRequestLength的大小-->
<configuration>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />
      <httpRuntime  requestValidationMode="2.0" maxRequestLength="10485760" executionTimeout="3600" appRequestQueueLimit="10000"/>
    </system.web>
</configuration>

效果:存在浏览器兼容问题

小白正学习中......

时间: 2024-11-05 16:10:41

FileUpload 简单上传+小预览的相关文章

模拟type=file;上传并预览图片

最近项目的会员中心,要做一个上传本地img并预览的效果.效果大概是这个样子.自己以前没做过:摸着石头过河总算完成了感觉有必要整理一下,写篇博客耍耍. 整体效果大概是这个样子的: 1.点击框框任何地方:弹出选择文件窗口: 2.选择后,再框框区域预览: 3.再次点击框框,更换图片. 下面说说整个实现的过程吧. html代码的结构大概是这样的.    <div class="imgitem secondImg">        <div class="u-add-

html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

HTML5 jQuery图片上传前预览

HTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html><html> <head> <title>HTML5上传图片预览</title> <meta char

[转]html之file标签 --- 图片上传前预览 -- FileReader

记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了其他方式来实现了这个功能. 今天无意发现了一个知识点,用html的file标签就能实现图片上传前预览,感觉很棒,记录一下!就是通过file标签和js的FileReader接口,把选择的图片文件调用readAsDataURL方法,把图片数据转成base64字符串形式显示在页面上. 1.闲话少说,测试一下,图片上

servlet实现文件上传,预览,下载和删除

CreateTime--2017年9月4日09:24:59 Author:Marydon 一.准备工作: 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数据转成JSON对象需要jar包:commons-beanutils-1.8.3.jar.commons-collections-3.2.1.jar.commons-lang-2.6.jar.commons-log

Jcrop+uploadify+php实现上传头像预览裁剪

最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁切点的坐标进行裁剪. 首先看一下uploadify上传插件的API: uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf.script :   后台处理程序的相对路径 .默认值:

图片上传时预览插件

html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="uploadView.js" type="text/javascript"></script> <script> window.

js实现图片上传及预览----------------------&gt;&gt;兼容ie6-8 火狐以及谷歌

<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> <script src="../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> </head> <body> <form id="f

图片上传前预览的功能

最近自己想做一个项目,涉及到很多图片上传和预览的功能,所以简单记录下: 这里我没有用vue的组件库,是单纯靠input来写出一个图片上传的功能. 思路是:先用input[type=file]来获取本地的图片,然后用HTML5的 File API 的 FileReader 图片本地转成base64格式的url,把这个url赋值到用于预览的src就好了. <div class="upload"> <div class="img-container"&g