`

多图片上传通过webservices(与js通信的方式)

    博客分类:
  • Flex
阅读更多

以下是通过选择本地图片文件,然后显示预览,

通过将图片转化为byteArray再传递给Webservices进行上传

 

C#代码(Webservices):

[WebMethod(Description = "Web 服务提供的方法,返回是否文件上载成功与否。")]
[System.Xml.Serialization.XmlInclude(typeof(Picture))]


    public bool UploadFiles(Pictures files)
    {
        try
        {
            foreach (Picture p in files.ps)
            {
                ///定义并实例化一个内存流,以存放提交上来的字节数组。
                MemoryStream m = new MemoryStream(p.fs);
               
                FileStream f = new FileStream(Server.MapPath(".") + "\\"
                 + p.filename, FileMode.Create);               
                m.WriteTo(f);
                m.Close();
                f.Close();
                f = null;
                m = null;
            }
            return true;
        }
        catch
        {
            return false;
        }
    }

 Pictures是Picture的数组集合对象,也可以将Pictures换成Picture[],生成flex中通过自动生成Webservices中间代码实现

Picture对象:

public class Picture
{
 public Picture()
 {
  //
  // TODO: 在此处添加构造函数逻辑
  //      
 }
    public byte[] fs;
    public string filename;
}

Flex上传的代码:

  private var pis:ArrayOfPicture=new ArrayOfPicture();
  
  private var s:Service; 
  private function init():void
       {
           s=new Service();
           ExternalInterface.addCallback("OnFileChange",frSelectHandler);//注册JS回调
           btnBrowser.addEventListener(MouseEvent.CLICK,mouseClickHandler);
       }
      
       private function mouseClickHandler(event:MouseEvent):void
       {
           ExternalInterface.call("Browser");//调用JS中Browser函数
       }
  
    private var i:Number=0;
       private function frSelectHandler(path:String):void
       {
         var img:MyImage=new MyImage();
         img.name="img"+i;
            img.source = path;
            img.test=path;
            imgbox.addChild(img);
            i++;
       }
      
        private function uploadimgs():void{
         pis.removeAll();
         for(var i:Number=0;i<imgbox.getChildren().length;i++){
          var img:MyImage=imgbox.getChildByName("img"+i) as MyImage;
           var ohSnap:ImageSnapshot = ImageSnapshot.captureImage((imgbox.getChildByName("img"+i) as MyImage));
             var str:String=ImageSnapshot.encodeImageAsBase64(ohSnap);
             var b64:Base64Decoder=new Base64Decoder();
             b64.decode(str);
             var p:Picture=new Picture();
             p.fs=b64.toByteArray();
             p.filename=int(Math.random()*100000000)+img.test.substring(img.test.length-4,img.test.length);
             pis.addPicture(p);
          }
          
         s.adduploadFilesEventListener(upload);
         var ps:Pictures=new Pictures();
         ps.ps=pis;
         s.uploadFiles(ps);
        }
        private function upload(e:UploadFilesResultEvent):void{
         if(e.result){
          Alert.show("上传成功!");
         }
        }

标签部分:

<mx:Button x="55" id="btnBrowser" y="50" label="选择文件"/>
 <mx:VBox id="imgbox" x="188.5" y="10"  verticalScrollPolicy="auto">
 </mx:VBox>
 <mx:Button x="55" y="184" label="上传(多个)" click="uploadimgs()"/>

 

在网页中添加以下代码:
<script language="JavaScript" type="text/javascript">
var requiredMajorVersion = 9;
var requiredMinorVersion = 0;
var requiredRevision = 28;
//关键代码
function Browser()
{
document.getElementById("fileInput").click();
}
function OnFileChange()
{

//TestUpfile是flash名称
thisMovie("TestUpfile").OnFileChange(document.getElementById("fileInput").value);
}
function thisMovie(movieName) {
         if (navigator.appName.indexOf("Microsoft") != -1) {
             return window[movieName];
         } else {
             return document[movieName];
         }
     }
</script>

 

添加文件标签:<input type="file" id="fileInput" style="display:none" onchange="OnFileChange()" />

 

 

分享到:
评论

相关推荐

    RESTful Web Services

    ### RESTful Web Services #### 知识点一:REST架构风格概述 - **定义与起源**:REST(Representational State Transfer)是一种软件架构风格,由Roy Fielding在2000年的博士论文中提出,主要应用于分布式超媒体...

    JavaScript通过Web Service实现AJAX无刷新数据交互

    JavaScript通过Web Service实现AJAX无刷新数据交互是一种常见的前端与后端通信技术,它极大地提升了网页的用户体验。AJAX(Asynchronous JavaScript and XML)的核心在于异步更新页面内容,而无需用户手动刷新整个...

    web聊天工具

    这些脚本通常与服务器通过Ajax或其他异步通信技术进行交互,实现实时更新聊天内容。 `T1Zh_fXllhXXaHIHjJ-35-287.png`可能是一个图片资源,用于装饰或指示聊天工具的某些功能,例如对话气泡、用户头像等。 `images...

    Delphi写ASP组件实现快速多文件WEB上传

    标题“Delphi写ASP组件实现快速多文件WEB上传”揭示了一个使用Delphi编程语言创建的ASP(Active Server Pages)组件,该组件旨在提高在Web环境中上传多个文件的效率。这个技术通常用于构建交互性强、用户友好的网站...

    .net webservice多线程上传 cs+bs

    在" .NET WebService 多线程上传 CS+BS "这个场景中,我们主要讨论的是如何利用C#(Client-side,CS)客户端通过多线程技术与B/S(Browser/Server)架构的Web服务交互,实现大文件或大量文件的高效上传。 一、Web...

    利用swfupload仿163邮箱添加附件所有源码 下载即可用

    3. **WebServices.asmx**:Web服务文件,处理来自SwfUpload的上传请求。 4. **JavaScript文件**:用于与SwfUpload组件和Web服务进行交互。 通过研究这些文件,你可以了解到如何在.NET环境下集成SwfUpload,实现类似...

    《Web站点设计与管理》练习题库参考答案.pdf

    在文档《Web站点设计与管理》练习题库参考答案中所提及的知识点非常广泛,涉及了网络技术、网页设计、数据库管理、服务器配置等多个领域。以下是对部分核心知识点的详细解读。 1. ASP与JSP: ASP(Active Server ...

    asp.net调用扫描仪扫描数据并上传代码

    这些控件提供了与硬件设备交互的接口,允许用户通过Web页面触发扫描操作,并获取扫描的图像数据。 3. **扫描仪控件**:`ScanOnWeb`扫描仪控件是专为Web环境设计的,它能在用户的IE浏览器中运行,提供扫描、预览和...

    System.Web.Extensions

    3. **Data Services**: System.Web.Extensions支持与数据源进行异步交互,如通过ADO.NET Data Services(以前称为Astoria)提供RESTful服务,使客户端可以通过HTTP协议访问和操作数据。 4. **JSON序列化**: 提供了...

    WEB在线编辑器asp.net

    【WEB在线编辑器asp.net】是一种基于ASP.NET技术构建的网页编辑工具,它允许用户在浏览器环境下进行文本编辑、格式化、图片上传等操作,极大地提升了网页内容的创作效率。这款编辑器通常集成在网站后台管理系统中,...

    WebServer

    【WebServer】是一个基于C#开发的简易Web服务器,它主要设计用于教学目的,帮助初学者理解Web服务器的工作原理和IIS(Internet Information Services)的支持角色。通过这个项目,你可以学习到如何用C#编程语言构建...

    ASP.NET AJAX 入门与案例详解

    2. **AJAX基本原理**:解释异步通信的工作方式,以及如何通过XMLHttpRequest对象在后台与服务器通信。 3. **ScriptManager组件**:详细介绍ScriptManager的作用,如何添加到页面,以及如何管理其他AJAX控件。 4. *...

    独立图片服务器的图片上传的解决方式

    - **网络带宽和延迟**:分布式部署会增加服务器之间的网络通信,特别是图片资源从图片服务器传输到Web服务器再转发给用户的过程,这可能要求优化网络带宽和降低网络延迟。 - **负载均衡**:部署多台图片服务器,并...

    ASP.NET 上传大文件

    3. 进度显示:通过JavaScript与服务器端的通信,可以在客户端实时更新上传进度,使用户了解文件上传的状态。 4. 错误处理:在上传过程中可能会遇到各种错误,如网络问题、服务器空间不足等,需要有适当的错误处理...

    网页 vs2010 二维码生成器

    JavaScript则用于实现页面动态效果和与后端的异步通信。 7. **部署与服务端** 最终的网页应用需要部署到服务器上,供用户通过网络访问。这可能涉及IIS(Internet Information Services)配置,或者使用其他Web...

    ASP实例开发源码-带后台管理的ASP+jS动感相册.zip

    - 数据库交互:ASP会与数据库进行通信,存储和检索图片信息,通常使用ADO(ActiveX Data Objects)进行数据操作。 - JavaScript动态效果:在前端,JavaScript可能被用来实现图片预览、滑动展示、缩放等动态效果,...

    毕业论文-基于.net和web-service的远程信息共享系统实现.doc

    .NET框架中的ASMX(ASP.NET Web Services)是实现Web Service的主要方式,它简化了服务的创建和调用过程。 3. 系统设计与实现 在设计远程信息共享系统时,首先需要了解.NET开发环境和C++编程语言。系统运行环境的...

    web 从入门到放弃笔记

    - IIS (Internet Information Services): 微软开发的Web服务器组件,集成于Windows操作系统。 - APACHE: 开源的Web服务器软件,广泛用于托管静态和动态网页。 - **主流浏览器**: - Chrome: Google开发的浏览器。 ...

    Flex 制作的 文件上传工具 C#语言

    4. **Flash Player**:`AC_OETags.js`是Adobe的外部接口(External Interface)的JavaScript库,用于Flash与HTML之间的通信。在这个上传工具中,它可能用来在Flash组件和网页之间传递数据,如文件选择的事件和上传...

Global site tag (gtag.js) - Google Analytics