FileUpload上传图片预览

最新推荐文章于 2021-11-24 22:22:09 发布
最新推荐文章于 2021-11-24 22:22:09 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： .NET 文章标签： button server image string path javascript

前台：

 

<head runat="server">
    <title></title>
    <style type="text/css">
#newPreview
{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
</style>
    <script language="javascript" type="text/javascript">
        function show(url) {
            var imgserver = document.getElementById("Image1");
            imgserver.style.display = 'none';
            var newPreview = document.getElementById("newPreview");
            newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
            newPreview.style.width = "80px";
            newPreview.style.height = "60px";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
           
            <asp:Button ID="Button1" runat="server" Text="上传" οnclick="Button1_Click" />
       
<div id="newPreview">
    <asp:Image ID="Image1" runat="server" Height="214px" Width="236px" />
</div>
<asp:FileUpload ID="FileUpload_diff" οnchange="show(this.value)" runat="server" />

    </form>
</body>

后台：

protected void Button1_Click(object sender, EventArgs e)
    {
        //获取要上传图片的全名
        string file = FileUpload_diff.FileName;
        if (file.Equals(""))
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "", "alert('请先点击浏览选择照片');", true);
        }
        else
        {
            //截取图片后缀
            string type = file.Substring(file.LastIndexOf(".") + 1);
            //设置文件上传的文件夹路径
            string path = Server.MapPath("~/test/upload");
            path += "//" + file;
            //将图片上传到服务器
            FileUpload_diff.PostedFile.SaveAs(path);
            Image1.ImageUrl = "upload/"+file;
        }
    }

maji9370
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
fileupload上传图片前预览
11-24
实现asp.net中使用fileupload控件上传图片前预览功能，可兼容ie6,ie7,ie8,火狐等浏览器，实现真正的上传图片前预览，节约网络资源
FileUpload实现上传预览功能
aozhenggong6007的博客
02-22 219
<asp:FileUpload ID="FileUpload1" runat="server" onchange="chgImg(this)" /> <div> <img src="" id="Photo" runat="server" style="max-height: 80px;fl...
FileUpload控件预览图片
小熊猫
11-11 409
HTML部分 <tr> <td class="auto-style1">上传图片：</td> <td> <asp:FileUpload ID="FileUpload1"...
使用FileUpload上传前预览图片
weixin_30449239的博客
03-17 67
Code 1<styletype="text/css">#newPreview{ 2FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) 3} 4</style> 5 6head内 7 8 9 10bo...
关于antd上传视频无法预览提供一种思路
weixin_41947778的博客
03-26 5686
关于antd上传视频无法预览提供一种思路 使用upload上传视频时，预览按钮是灰色的无法点击，并且没有缩略图，我这边的解决方法是，自定义一个预览，点击预览时，直接跳转到另一个页面，缩率图可以使用一张网图从网上或者是直接存储在服务器上的。 handlePreviewFile(file) { return new Promise((resolve) => { const reader = ne...
ASP.net--Web服务端控件
像寒冷中的松树一样坚强
09-25 384
常用的Web控件--文件上传控件：FileUpload FileUpload 类显示一个文本框控件和一个浏览按钮，使用户可以选择客户端上的文件并将它上载到 Web 服务器。 用户选择要上载的文件后，FileUpload 控件不会自动将该文件保存到服务器,必须显式提供一个控件或机制，使用户能提交指定的文件。例如，可以提供一个按钮，用户单击它即可上载文件。 语法： 属性:  Fi
使用FileUpload控件上传服务器前调整图片大小
weixin_30394333的博客
08-23 138
原文链接http://weblogs.asp.net/markmcdonnell/archive/2008/03/09/resize-image-before-uploading-to-server.aspx 这是我在一个国外博客上看到的一篇博文。。意思是将客户端上传的图片在上传前调整大小以节省服务端空间但是图片大小仍然上传。 一篇非常棒的article.. 我重新整理了一下。 1.首先...
FileUpload上传图片前实现图片预览功能(附演示动画)
10-27
FileUpload控件上传图片前实现预览，很多网友都希望实现这样的功能,本人总结了一下，感兴趣的朋友可以参考一下，希望对您有帮助
.NET 使用FileUpload上传并预览
01-04
使用FileUpload快速上传并保存图片，可以在使用 FileUpload选择图片后，预览图片在选择是否保存。
Asp.net图片上传实现预览效果的简单代码
01-02
在页面上放入一个上传控件和一个图片控件. 代码如下: ”FileUpload1″ runat=”server” xss=removed> ”Image1″ runat=”server” > 在上传控件中写onpropertychange=”show(this.value)”事件并调用js中的...
图片上传之fileupload
快乐学习
05-31 5879
最近学习了图片上传这个功能，这个功能比较常见，因此来整理一下，了解上传的基本原理，以便后期遇到图片上传功能可以很快上手。        要说图片上传，我们先来说一下图片上传后存储的两种方式：一种是将图片存储到数据库中；一种是将图片存储在服务器文件目录中。首先，对于将图片存储到数据库中适合数据量小的情况，因为写到数据库的图片需要转换成二进制流的格式，占用数据空间比较，适合少量图片的存储，比如，系统
使用uploadPreview插件上传文件并且预览
Troyqu的专栏
08-06 9841
分别引入响应的js文件，然后代码如下 uploadPreview演示 $(function () { $("#up").uploadPreview({ Img: "ImgPr", Width: 300, Height: 300, ImgType: ["gif", "jpeg", "jpg", "bmp", "png
【ASP】FileUpload上传图片并保存数据库
Vagrenter的博客
02-02 7560
界面简单粗糙，将就将就，代码复制过去应该可以直接用 前台代码就这点： div class="Upload"> asp:FileUpload ID="FileUpload" runat="server" /> div> asp:Button ID="btnSave" runat="server" Text=&quot
fileUpload实现普通表单和file图片上传到数据库
大帅哥的博客
05-16 804
fileUpload实现普通表单和file图片上传到数据库效果图：实现jsp:页面servelt:控制器service:逻辑操作dao:数据库操作domain：javaBean类 首先需要去apache 官网 下载commons-fileupload和 commons-io 下载这两个jar包 下载步骤：fileUpload的commons-fileupload和 commons-io 下载 效果图： 表单提交： 数据库： 实现 jsp:页面 <%@ page contentType="text/
FileUpload组件图片的上传
kayden的CSDN
12-16 485
上次谈了前端的技术，今天谈一下后端的吧！ 今天来讲讲如何实现图片的上传和下载 关于这个的实现是有两种方法，一种是使用apache下面的commons子项目的FileUpload组件来进行文件的上传，另外一种是通过strut2进行上传，这篇先来讲讲前者。 一、首先你要先下载好两个包，分别是commons-fileupload.jar和commons-io.jar包，将其
Bootstrap FileInput中文API整理
热门推荐
过去_现在_未来
04-09 15万+
Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件，在用的过程中，网上能查到的api都不是很全，所以想着整理一份比较详细的文档，方便自己今后使用，也希望能给大家带来帮助，如有错误，希望大家积极指正。 一、    引入文件 &lt;link href="../css/bootstrap.min.css"rel="style...
FileUpload选择图片并上传
qhzhen的博客
09-23 6160
在上传按钮的事件里： //文件上传         protected void btn_Click(object sender, EventArgs e)         {               if (FileUpload1.HasFile)//判断是否存在文件             {                 string FilePath = Server....
【源代码解读】图片上传的组件Apache fileupload如何使用
会者定离，一期一祈
11-24 1476
图片上传的组件 在若依框架中，已经事先集成了文件上传，图片上传等功能。 该组件使用非常简单。 以一个图片上传的功能举例，如下： 前端代码如下： <el-form-item label="背景图"> <imageUpload v-model="form.backImg"/> </el-form-item> 区区的三行代码就实现了图片上传。 backImg对应着实体类中的背景图属性，映射到数据库，实际上存放的是图片上传的路径。 如何
Common-fileupload上传图片到数据库
最新发布
04-04
以下是一种常用的方法，使用Commons FileUpload库将图片上传到数据库： 1. 在HTML表单中添加文件上传字段。 ```html <form action="upload.jsp" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="Upload" /> </form> ``` 2. 在服务器端，使用Commons FileUpload库解析上传文件。 ```java // 创建一个文件上传处理器 ServletFileUpload upload = new ServletFileUpload(); // 解析上传请求 FileItemIterator iter = upload.getItemIterator(request); while (iter.hasNext()) { FileItemStream item = iter.next(); // 如果当前项是文件字段，则保存文件到数据库 if (!item.isFormField()) { InputStream stream = item.openStream(); // 将流保存到数据库 // ... } } ``` 3. 将输入流保存到数据库中。 ```java // 假设“conn”是一个打开的数据库连接 PreparedStatement stmt = conn.prepareStatement("INSERT INTO images (filename, content) VALUES (?, ?)"); stmt.setString(1, item.getName()); stmt.setBinaryStream(2, stream, stream.available()); stmt.executeUpdate(); ``` 注意：这只是一个简单的示例，未考虑文件大小、文件类型、文件名重复等问题。需要根据实际情况进行修改和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值