图片上传及网络相册功能

最新推荐文章于 2021-06-09 11:40:15 发布
最新推荐文章于 2021-06-09 11:40:15 发布
阅读量86 收藏
点赞数
文章标签： ui xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/luca623/archive/2008/09/11/1288988.html
版权

 

支持图片批量上传

修改删除用ajax技术

Default.aspx 前台代码
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Theme="BlackCup" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<!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>
<script type="text/javascript">
      var upNum=1;
        var check=false;
        function checkSelected()
        {
            var datalist=document.getElementById("<%=dlstImages.ClientID%>");
            var chkSelect=false;
            var chkList=datalist.getElementsByTagName("input");

for(var i=0;i<chkList.length;i++)
            {
if(chkList[i].checked==true)
                {
                    chkSelect=true;
break;
                }
            }
if(chkSelect==false)
            {
                alert("你没有选择任何图片");
return false;
            }
else
            {
return confirm("你确定删除这些图片吗?");
            }
        }
        function editName()
        {

            div1.style.display="";
            var lbl=document.getElementById("sp1");

            lbl.style.display="none";

return false;
        }
        function openImage(img)
        {

              window.open(img,'img','height=700, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no, status=no');

        }
        function addImage()
        {
            upNum++;//限制上传数量
            if(upNum<5)
            {
                var str = '<input type="file" size="20" name="File" onpropertychange="checkImgType(this)" /><br>'
                document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
            }
else
            {
                alert("最多上传4张图片");
            }
        }
        function checkImgType(obj)
        {

            var file=obj.value;

            var index=file.lastIndexOf(".")
            var exten=file.substr(index);
            var strlower=exten.toLowerCase();
switch(strlower)
            {
case ".jpg":
                   check=true;
break;
case ".jpeg":
                   check=true;
break;
case ".bmp":
                   check=true;
break;
case ".png":
                   check=true;
break;
case ".gif":
                   check=true;
break;

            }
if(!check)
            {
                alert("上传图片类型不正确");
            }

        }
        function checktype()
        {
if(!check)
             {
                alert("上传图片类型不正确");
return false;
            }
else 
return true;
        }
</script>

<link href="LucaStyleSheet.css" rel="stylesheet" type="text/css" />

</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>

<asp:Label
        id="lblImageFile"
        Text="图片文件:"

        Runat="server" />&nbsp;
<div id="MyFile">
<input type="file" name="file" onpropertychange="checkImgType(this)"/>&nbsp;&nbsp;<input id="Button2" type="button" value="上传更多" onclick="addImage()" /><br /></div>
<br />

<asp:Button
        id="btnAdd"
        Text="上传图片"
        OnClick="btnAdd_Click" 
        Runat="server" OnClientClick="return checktype()" />
<asp:Button ID="Button1" runat="server" Text="删除图片" OnClientClick="return checkSelected()" OnClick="Button1_Click" />
<asp:Label ID="lblMessage" runat="server" BackColor="White" ForeColor="Red"></asp:Label>

<hr />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DataList
        id="dlstImages"
        RepeatColumns="3"
        runat="server" DataKeyField="Name" OnDeleteCommand="dlstImages_DeleteCommand" OnEditCommand="dlstImages_EditCommand" OnCancelCommand="dlstImages_CancelCommand" OnUpdateCommand="dlstImages_UpdateCommand">
<ItemTemplate>


<img id="img1" src="<%#ResolveUrl(FormatImagePath(Eval("Name"))) %>"  style="width:200px;height:200px" onclick="javascript:openImage('<%#ResolveUrl(FormatImagePath(Eval("Name"))) %>')"/>

<br />
<div style="float:left">

<asp:Label ID="lblName" runat="server" Text='<%#FormatImageName(Eval("Name"),"0") %>' ></asp:Label>
<asp:HiddenField ID="hidFileType" runat="server" Value='<%#FormatImageName(Eval("Name"),"1") %>' />
</div>

<div style="float:right">
<asp:LinkButton ID="lbnEdit" runat="server" Text="修改" CommandName="Edit"></asp:LinkButton>
<asp:LinkButton ID="lbnDel" runat="server" Text="删除" CommandName="Delete" OnClientClick="return confirm('你确认删除吗？')"></asp:LinkButton>
<asp:CheckBox ID="chk1" runat="server" />  
</div>
</ItemTemplate>
<ItemStyle Width="250px" HorizontalAlign="Center" BorderColor="black" BorderStyle="Solid" BorderWidth="1px" />
<EditItemTemplate>
<asp:TextBox ID="txt1" runat="server" Text='<%#FormatImageName(Eval("Name"),"0") %>'></asp:TextBox>
<asp:HiddenField ID="hidFileType" runat="server" Value='<%#FormatImageName(Eval("Name"),"1") %>' />
<asp:LinkButton ID="lbnUpdate" runat="server" Text="更新" CommandName="Update"></asp:LinkButton>
<asp:LinkButton ID="lbnCancel" runat="server" Text="取消" CommandName="Cancel"></asp:LinkButton>
</EditItemTemplate>
</asp:DataList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>


</div>
</form>
</body>
</html>
后台代码
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;
using System.IO;
public partial class _Default : System.Web.UI.Page 
{

protected void Page_Load(object sender, EventArgs e)
    {

    }
protected void btnAdd_Click(object sender, EventArgs e)
    {
//获取上传文件集合
        HttpFileCollection uploadedFiles = Request.Files;
for (int i = 0; i < uploadedFiles.Count; i++)
        {
            HttpPostedFile userFile = uploadedFiles[i];
try
            {
if (userFile.ContentLength > 0)
                {
if (CheckFileType(userFile.FileName))
                    {
//获取登录名
                        string userName = HttpContext.Current.User.Identity.Name;
//为每个用户创建一个文件夹存图片
                        String filePath = Server.MapPath("~/UploadImages/" + userName + "/");
                        DirectoryInfo dire = new DirectoryInfo(filePath);
if (!dire.Exists)
                        dire.Create();
//获取上传文件名
                        string fName=System.IO.Path.GetFileName(userFile.FileName);
//获取后缀名
//string fExtension=System.IO.Path.GetExtension(userFile.FileName);
                        userFile.SaveAs(filePath + fName);
                    }
                }
            }
catch
            {
                lblMessage.Text += String.Format("上传文件:{0}出错!<br/>",userFile.FileName.ToString());
            }
        }



    }
//判断图片类型
    bool CheckFileType(string fileName)
    {
string ext = Path.GetExtension(fileName);
switch (ext.ToLower())
        {
case ".gif":
return true;
case ".png":
return true;
case ".jpg":
return true;
case ".jpeg":
return true;
case ".bmp":
default:
return false;
        }
    }
//所有加载完成后执行
    void Page_PreRender()
    {
string userName = HttpContext.Current.User.Identity.Name;
string upFolder = MapPath("~/UploadImages/" + userName + "/");

        DirectoryInfo dir = new DirectoryInfo(upFolder);
if (!dir.Exists)
return;
        dlstImages.DataSource = dir.GetFiles();
        dlstImages.DataBind();

    }
protected void Button1_Click(object sender, EventArgs e)
    {
//批量删除
        FileInfo file = null;
string userName = HttpContext.Current.User.Identity.Name;
for (int i = 0; i < dlstImages.Items.Count; i++)
        {
            CheckBox chk = dlstImages.Items[i].FindControl("chk1") as CheckBox;
if (chk.Checked == true)
            {
string path = Server.MapPath("~/UploadImages/"+userName+"/" + dlstImages.DataKeys[i].ToString());
                file = new FileInfo(path);
                file.Delete();
            }
        }

    }
//组合图片完成路径
    protected string FormatImagePath(object imageName)
    {
string userName = HttpContext.Current.User.Identity.Name;
string imagePath = "~/UploadImages/" + userName + "/" + imageName;
return imagePath;
    }
//前台显示隐藏后缀名
    protected string FormatImageName(object imgName,string filetype)
    {
//隐藏后缀名
        if (filetype == "0")
        {
string strImgName = imgName.ToString();
return strImgName.Substring(0, strImgName.LastIndexOf('.'));
        }
//显示后缀名
        else
        {
string type=System.IO.Path.GetExtension(imgName.ToString());
return type;
        }

    }

protected void dlstImages_DeleteCommand(object source, DataListCommandEventArgs e)
    {
string userName = HttpContext.Current.User.Identity.Name;
string path = Server.MapPath("~/UploadImages/"+userName+"/" +dlstImages.DataKeys[e.Item.ItemIndex].ToString());
        FileInfo file = new FileInfo(path);
        file.Delete();
    }
protected void dlstImages_EditCommand(object source, DataListCommandEventArgs e)
    {
        dlstImages.EditItemIndex = e.Item.ItemIndex;
    }
protected void dlstImages_UpdateCommand(object source, DataListCommandEventArgs e)
    {
string userName = HttpContext.Current.User.Identity.Name;
string path = Server.MapPath("~/UploadImages/"+userName+"/" + dlstImages.DataKeys[e.Item.ItemIndex].ToString());
        FileInfo file = new FileInfo(path);
string fileName=(dlstImages.Items[e.Item.ItemIndex].FindControl("txt1") as TextBox).Text;
string type = (dlstImages.Items[e.Item.ItemIndex].FindControl("hidFileType") as HiddenField).Value;
string despath = Server.MapPath("~/UploadImages/"+userName+"/" +fileName+type);
//重命名
        file.MoveTo(despath);
        dlstImages.EditItemIndex = -1;
    }
protected void dlstImages_CancelCommand(object source, DataListCommandEventArgs e)
    {
        dlstImages.EditItemIndex = -1;

    }
}

转载于:https://www.cnblogs.com/luca623/archive/2008/09/11/1288988.html

weixin_33971977
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
php如何实现上传照片功能_php如何实现图片上传功能
weixin_42178688的博客
03-09 2798
php实现图片上传功能的方法：首先创建存储图片的文件夹；然后创建HTML部分；接着创建“uploadHandler.php”文件；最后将文件的图片格式与数组中的元素进行比较并实现上传即可。推荐：《PHP视频教程》PHP 中的图片上传操作前端编程中，有时需要允许浏览者上传某张图片，这样的功能我们可以通过 PHP 来实现。一. 创建存储图片的文件夹在这里，我们创建文件夹 “ file ” 来存放用户上...
oss图片上传api_java获取网络图片上传到OSS的方法
weixin_39834205的博客
12-21 249
OSS不支持通过一个网络地址来上传图片，所以若想将网络上的图片上传到OSS上需要走点弯路。1、通过链接将图片下载到本地的一个文件夹下面2、用OSS上传该文件夹下的文件3、上传完成后删除本地的文件具体代码如下：//获取当前项目的绝对路径public static String getTomcatPath(){String nowpath;String tempdir;nowpath=System.g...
七牛上传 网路图片
Areom个人博客
07-19 769
require __DIR__."/../../php-sdk-7.2.6/autoload.php"; use Qiniu\Auth; use Qiniu\Storage\BucketManager; $url="http://afds.fds.fsad/fdsa.jpg"; $houzhui=getimgsuffix($url); $key = 'images/'.date("Ymd"...
将网络图片或者设备（钉钉）上传图片保存至本地 并展示
Zoe_YuZu的博客
01-15 1287
有时候需要将网络图片保存至数据库 查询时再展示图片信息 1、将图片上传本地 并将上传本地地址赋给 表 /* * urlStr :图片原地址链接 *path ：本地图片地址 * filename：图片名称 * */ public static void loadImgAngin(String urlStr,String path,String filename) throws BusinessException { FileOutputStream outStream=null; try
api上传网络图片的方法
Alex20182019的博客
04-10 398
之前看到有人在网络求教《淘宝api的吗？求问如何直接上传网络图片》，为了让新人少走弯路，以下是小编写整理相关解决方法。 代码经过测试（可以看后面的返回结果） 比如：https://www.onebound.cn/daigou/logo/0-702x180.jpg /** 使用淘宝open api直接上传网络图片的方法 */ //调用SDK代码如下： $appkey=’’; $secret=’’; ...
android实现上传本地图片到网络功能
08-29
Android实现上传本地图片到网络功能 Android实现上传本地图片到网络功能是Android开发中一个常见的需求，为了满足这个需求，开发者需要了解Android上传本地图片到网络的实现步骤和相关技术。下面将对Android实现...
Freep相册上传图片.rar
04-04
"Freep相册上传图片"是一个专注于图片上传功能的系统，通过易语言编程实现，提供了高效、便捷的图片上传体验。本文将围绕这一主题，详细阐述其背后的原理和技术细节。 易语言，一种中文编程语言，以其直观的语法...
Android实现图片上传功能
08-31
在Android应用开发中，图片上传功能是一个常见的需求，特别是在社交应用、内容分享或者用户反馈等场景。本篇文章将深入探讨如何在Android平台上实现这个功能，包括图片选择、处理和上传的整个流程。 首先，实现图片...
Android实现图片选择上传功能实例
08-28
Android 实现图片选择上传...本文详细介绍了 Android 实现图片选择上传功能的步骤和代码实现，包括图片选择功能、图片上传功能、RecyclerView GridLayoutManager 和 OnClickListener 和 ImagePickerAdapter 等知识点。
iOS实现压缩图片上传功能
09-02
在iOS应用开发中，用户经常需要上传图片，无论是从相册选择还是直接通过相机拍摄。为了提高用户体验并减少网络传输的负担，通常需要在上传前对图片进行压缩处理。本篇将详细介绍如何在iOS中实现图片压缩并上传的功能...
七牛云上传图片
01-11
七牛云上传图片，后端PHP，前端基于bootstrap，用于异步上传图片返回外链。在server/config.php中自行配置七牛云
java实现上传网络图片到微信临时素材
08-27
主要为大家详细介绍了java实现上传网络图片到微信临时素材，网络图片上传到微信服务器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
图片上传、显示网络图片、相册选取、拍照选取、图片裁剪
Jamkier's zone
09-13 825
左右滑动倒影：http://blog.csdn.net/ryantang03/article/details/8053643
微信图片上传java_java实现上传网络图片到微信临时素材
weixin_33196034的博客
02-12 106
本文实例为大家分享了java实现上传网络图片到微信临时素材的具体代码，供大家参考，具体内容如下package org.afuos.playcontrol.service;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;import java.io.*;import java.net.HttpURLCon...
如何将本地图片上传到网络？
qq_43417424的博客
06-09 965
如果需要引用图片地址，本地不可以，qq空间又禁止转载，百度地图也关闭了，怎么办？这里教大家一个好方法。 只需要写一份博客，将图片放置网络即可。
网络编程_TCP协议上传图片并给出反馈
辐_射的博客
04-12 390
package cn.itcast_13; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.ne
图片上传,网络图片路径配置
才这么点的博客
06-19 1042
图片上传代码 @value("${tupian.url}") private String url; private static final String SEPARATOR = "/"; @Autowired private StaticImagePath staticImagePath; @Override public ResultBean fileUpload(MultipartFile file,Integer type) { String uuid = UU
[网络收集]asp.net文件上传/.net上传图片方法
weixin_30682127的博客
11-12 68
#region 上传文件的方法/// <summary>/// 上传文件方法/// </summary>/// <param name="myFileUpload">上传控件ID</param>/// <param name="allowExtensions">允许上传的扩展文件名类型,如：string[] allowExte...
php上传网路图片,手把手教你用php实现图片上传功能
weixin_34024555的博客
03-09 581
一 为了测试图片上传功能, 把图片路径保存到数据库, 我们得先新建个测试表 test_img.CREATE TABLE test_img (id int(4) UNSIGNED NOT NULL AUTO_INCREMENT,path varchar(100) default NULL,upload_time timestamp default CURRENT_TIMESTAMP,PRIMARY...
ios swift 相册图片上传
最新发布
02-05
总的来说，实现iOS平台上的相册图片上传并不困难，通过UIImagePickerController和网络库的配合，可以实现简单、高效的图片上传功能。当然，要根据具体的项目需求和后台接口的要求来进行相应的调整和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值