aspx页面中用Input 标签实现上传图片功能

实现上传图片功能需单独的建立一个aspx页面,
其中前台页面需要注意两点:
a)实现上传功能的input的type="file"
b)设置请求报文头为 enctype="multipart/form-data" 类型

前台代码如下:

<form method="post" enctype="multipart/form-data">
        <table class="list">
            <tr>
                <th>上传</th>
                <td>
                    <input type="file" name="f1" /></td>
            </tr>
            <tr>
                <th></th>
                <td>
                    <input type="submit" value="上传" /></td>
            </tr>
        </table>
    </form>

在后台.cs文件中需注意几点:
a)使用 Request.Files 从请求报文中获得上传过来的文件

b)上传到服务器中需要重命名一个永不重复的文件,使用 Guid.NewGuid()
string newName = Guid.NewGuid() + extName;

c)上传成功的标志为重命名的图片上传到服务器上,并且数据库中存储图片路径的字段修改成功

后台处理上传的方法 ProcessUpload() 代码如下:

private void ProcessUpload(int pid)
        {
            //1.0得到上传过来文件
            HttpFileCollection fils = Request.Files;//得到上传过来的文件

            if (fils.Count > 0)
            {
                if (fils[0].ContentLength > 0)
                {
                    //2.0上传图片以后要将图片的名称做一个修改(不能重复)
                    string oldName = fils[0].FileName;
                    //得到当前名称的后缀
                    string extName = System.IO.Path.GetExtension(oldName);
                    //生成一个永不重复的名称
                    string newName = Guid.NewGuid() + extName;

                    using (Image img = Image.FromStream(fils[0].InputStream))
                    {
                        //将图片流保存到服务器路径上
                        img.Save(Server.MapPath("/upload/img/") + newName);

                        //将数据库中数据对应对象的图片名称改为当前图片的名称
                        BlogPhotoBLL bll = new BlogPhotoBLL();
                        BlogPhoto model = bll.GetModel(pid);
                        //修改图片的名称
                        model.PSrc = newName;
                        //提交,修改数据库图片的名称
                        if (bll.Update(model))
                        {
                            Response.Write("<script>alert(‘上传成功‘);window.location=‘/0906/Photo/PhotoList.aspx?albId=" + albId + "‘</script>");
                            Response.End();
                        }
                    }
                }
                else
                {
                    Response.Write("<script>alert(‘您还没有选中文件‘);window.location=window.location</script>");
                    Response.End();
                }
            }
        }
时间: 2024-12-27 09:30:34

aspx页面中用Input 标签实现上传图片功能的相关文章

html移动应用 input 标签 清除按钮功能如何实现(不触发键盘)

有个需求是:输入框有文本的时候就显示清除按钮,没有文本则隐藏清除按钮,点击清除按钮不能影响键盘弹出的状态. 网上有css实现自动显示和隐藏清除按钮的方案,但是考虑到兼容性,我们还是使用js来实现. css body{             background: #eee;         }         form{             margin: 30px 0;             position: relative;         }         #keyword{

HTML简单登录和注册页面及input标签诠释

今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标记语言.HTML 标签是由尖括号包围的关键词,比如 <html>.HTML 标签通常是成对出现的,比如 <b> 和 </b>: <html> 与 </html> 之间的文本描述网页: <body> 与 </body> 之间的文

vs2010 用户控件拖到aspx页面不可用

错误描述: 在web项目中添加一个用户控件,直接拖动用户控件ascx到aspx页面出现a标签而不是控件标签 解决办法: 把“源”切换为“设计”视图,然后拖动ascx用户控件到页面即可:

对于使用input标签上传文件的功能selenium的使用方法

from selenium import webdriveroption = webdriver.ChromeOptions()option.add_argument('--user-data-dir=C:/Users/Administrator/AppData\Local/Google/Chrome/User Data')driver = webdriver.Chrome(chrome_options=option)driver.get('https://www.cnblogs.com/')d

Aspx页面模拟WebService功能

在后台引入 using System.Web.Services 命名空间 然后在编写web服务方法: 1 [WebMethod] 2 public static string GetData(string time, string targetColumn) 3 { 4 return "我是一个位于Aspx页面的WebService方法"; 5 } 前端用Ajax的Post方法发送请求: 1 $.ajax({ 2 type: "post", 3 url: url,

HTML参考手册(1)——HTML 标签列表(功能排序)

按功能顺序列出的 HTML 4.01/XHTML 1.0 标签手册 NN:显示所支持标签的 Netscape 的最早版本. IE:显示所支持标签的 Internet Explorer 的最早版本. DTD:显示在哪一种XHTML 1.0 DTD中,标签是被允许的.S=Strict, T=Transitional, F=Frameset. 基本的标签 描述 NN IE DTD <!DOCTYPE>  定义文档类型.     STF <html> 定义 html 文档. 3.0 3.0

如何用input标签上传多个图片并回显

本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下. 还是放一下源码,只谈效果,不放源码的都是耍流氓 这是body <body> <div class="uploadImgB

input标签属性

很多时候,我们都用到了很多标签实现输入功能,所以在这里梳理一下. 1.建立一个文本框 <input type="text" name="userName"/> 2.建立一个单选按钮 <input type="radio" name="radiobtn vvalue="radio"/> 3.建立一个列表.菜单 <select name="select"> <

html之input标签和form标签

input标签 input标签是自己闭合的 <input /> input系列有checkbox.redio.password.button.file等 1.type='text' 和type='password' <input type='text' /> type='text' 和type='password' 用户名:<input type="text"/> <br/><br/> 密  码:<input type=