Asp.net+Flash多文件上传

很多时候在做完自己的是以后都喜欢来园子里面看看，但多数时候是学习，今天闲来之于也学学写点东西

今天在公司做一个上传图片的东西

于是就在gg上找了一个php+swf上传的东西

没有办法公司用的是.net于是就动手改动了

代码

<! 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 >
     < style >
    .swiff - uploader - box a {
    display: none  ! important;
}

/*  .hover simulates the flash interactions  */
a:hover, a.hover {
    color: red;
}

#demo - status {
    padding: 10px 15px;
    width: 420px;
    border: 1px solid #eee;
}

#demo - status .progress {
    background: url(progress.gif) no - repeat;
    background - position:  + 50 %   0 ;
    margin - right:  0 .5em;
    vertical - align: middle;
}

#demo - status .progress - text {
    font - size:  0 .9em;
    font - weight: bold;
}

#demo - list {
    list - style: none;
    width: 450px;
    margin:  0 ;
}

#demo - list li.validation - error {
    padding - left: 44px;
    display: block;
    clear: left;
    line - height: 40px;
    color: #8a1f11;
    cursor: pointer;
    border - bottom: 1px solid #fbc2c4;
    background: #fbe3e4 url(failed.png) no - repeat 4px 4px;
}

#demo - list li.file {
    border - bottom: 1px solid #eee;
    background: url(file.png) no - repeat 4px 4px;
    overflow: auto;
}
#demo - list li.file.file - uploading {
    background - image: url(uploading.png);
    background - color: #D9DDE9;
}
#demo - list li.file.file - success {
    background - image: url(success.png);
}
#demo - list li.file.file - failed {
    background - image: url(failed.png);
}

#demo - list li.file .file - name {
    font - size:  1 .2em;
    margin - left: 44px;
    display: block;
    clear: left;
    line - height: 40px;
    height: 40px;
    font - weight: bold;
}
#demo - list li.file .file - size {
    font - size:  0 .9em;
    line - height: 18px;
     float : right;
    margin - top: 2px;
    margin - right: 6px;
}
#demo - list li.file .file - info {
    display: block;
    margin - left: 44px;
    font - size:  0 .9em;
    line - height: 20px;
    clear
}
#demo - list li.file .file - remove {
    clear: right;
     float : right;
    line - height: 18px;
    margin - right: 6px;
}
     </ style >
     < script type = " text/javascript "  src = " mootools.js " ></ script >
     < script type = " text/javascript "  src = " Swiff.Uploader.js " ></ script >
     < script type = " text/javascript "  src = " Fx.ProgressBar.js " ></ script >
     < script type = " text/javascript "  src = " Lang.js " ></ script >
     < script type = " text/javascript "  src = " FancyUpload2.js " ></ script >
     < script type = " text/javascript " >
         /*  <![CDATA[  */

/* *
 * FancyUpload Showcase
 *
 * @license        MIT License
 * @author        Harald Kirschner <mail [at] digitarald [dot] de>
 * @copyright    Authors
  */

window.addEvent( ' domready ' , function() {  //  wait for the content

     //  our uploader instance 
    
    var up  =   new  FancyUpload2($( ' demo-status ' ), $( ' demo-list ' ), {  //  options object
         //  we console.log infos, remove that in production!!
        verbose:  true ,
        
         //  url is read from the form, so you just have to change one place
        url: $( ' form-demo ' ).action,
        
         //  path to the SWF file
        path:  ' Swiff.Uploader.swf ' ,
        
         //  remove that line to select all files, or edit it, add more items
        typeFilter: {
             ' Images (*.jpg, *.jpeg, *.gif, *.png) ' :  ' *.jpg; *.jpeg; *.gif; *.png '
        },
        
         //  this is our browse button, *target* is overlayed with the Flash movie
        target:  ' demo-browse ' ,
        
         //  graceful degradation, onLoad is only called if all went well with Flash
        onLoad: function() {
            $( ' demo-status ' ).removeClass( ' hide ' );  //  we show the actual UI
            $( ' demo-fallback ' ).destroy();  //  ... and hide the plain form
            
             //  We relay the interactions with the overlayed flash to the link
             this .target.addEvents({
                click: function() {
                     return   false ;
                },
                mouseenter: function() {
                     this .addClass( ' hover ' );
                },
                mouseleave: function() {
                     this .removeClass( ' hover ' );
                     this .blur();
                },
                mousedown: function() {
                     this .focus();
                }
            });

             //  Interactions for the 2 other buttons
            
            $( ' demo-clear ' ).addEvent( ' click ' , function() {
                up.remove();  //  remove all files
                 return   false ;
            });

            $( ' demo-upload ' ).addEvent( ' click ' , function() {
                up.start();  //  start upload
                 return   false ;
            });
        },
        
         //  Edit the following lines, it is your custom event handling
        
         /* *
         * Is called when files were not added, "files" is an array of invalid File classes.
         * 
         * This example creates a list of error elements directly in the file list, which
         * hide on click.
          */  
        onSelectFail: function(files) {
            alert(files);
            files.each(function(file) {
                 new  Element( ' li ' , {
                     ' class ' :  ' validation-error ' ,
                    html: file.validationErrorMessage  ||  file.validationError,
                    title: MooTools.lang. get ( ' FancyUpload ' ,  ' removeTitle ' ),
                    events: {
                        click: function() {
                             this .destroy();
                        }
                    }
                }).inject( this .list,  ' top ' );
            },  this );
        },
        
         /* *
         * This one was directly in FancyUpload2 before, the event makes it
         * easier for you, to add your own response handling (you probably want
         * to send something else than JSON or different items).
          */
        onFileSuccess: function(file, response) {
            var json  =   new  Hash(JSON.decode(response,  true )  ||  {});
            
             if  (json. get ( ' status ' )  ==   ' 1 ' ) {
                file.element.addClass( ' file-success ' );
                file.info. set ( ' html ' ,  ' <strong>Image was uploaded:</strong> Width: '   +  json. get ( ' width ' )  +   ' px, Height: '   +  json. get ( ' height ' )  +   ' px, <em>Mime: '   +  json. get ( ' mime ' )  +   ' </em> ' );
                 // alert(response);
            }  else  {
                file.element.addClass( ' file-failed ' );
                 // alert(response);
                file.info. set ( ' html ' ,  ' <strong>An error occured:</strong>  '   +  (json. get ( ' error ' )  ?  (json. get ( ' error ' )  +   '  # '   +  json. get ( ' code ' )) : response));
            }
        },
        
         /* *
         * onFail is called when the Flash movie got bashed by some browser plugin
         * like Adblock or Flashblock.
          */
        onFail: function(error) {
             switch  (error) {
                 case   ' hidden ' :  //  works after enabling the movie and clicking refresh
                    alert( ' To enable the embedded uploader, unblock it in your browser and refresh (see Adblock). ' );
                     break ;
                 case   ' blocked ' :  //  This no *full* fail, it works after the user clicks the button
                    alert( ' To enable the embedded uploader, enable the blocked Flash movie (see Flashblock). ' );
                     break ;
                 case   ' empty ' :  //  Oh oh, wrong path
                    alert( ' A required file was not found, please be patient and we fix this. ' );
                     break ;
                 case   ' flash ' :  //  no flash 9+ :(
                    alert( ' To enable the embedded uploader, install the latest Adobe Flash plugin. ' )
            }
        }
        
    });
    
});
         /*  ]]>  */
     </ script >
</ head >
< body >
    < div id = " demo " >

< form action = " script.aspx "  method = " post "  enctype = " multipart/form-data "  id = " form-demo " >

     < fieldset id = " demo-fallback " >
         < legend > File Upload </ legend >
         < p >
            This form  is  just an example fallback  for  the unobtrusive behaviour of FancyUpload.
            If  this  part  is  not changed, something must be wrong with your code.
         </ p >
         < label  for = " demo-photoupload " >
            Upload a Photo:
             < input type = " file "  name = " Filedata "   />
         </ label >
     </ fieldset >

     < div id = " demo-status "   class = " hide " >
         < p >
             < a href = " # "  id = " demo-browse " > 选择图片 </ a >   |
             < a href = " # "  id = " demo-clear " > 清除图片 </ a >   |
             < a href = " # "  id = " demo-upload " > 开始上传 </ a >
         </ p >
         < div >
             < strong  class = " overall-title " ></ strong >< br  />
             < img src = " bar.gif "   class = " progress overall-progress "   />
         </ div >
         < div >
             < strong  class = " current-title " ></ strong >< br  />
             < img src = " bar.gif "   class = " progress current-progress "   />
         </ div >
         < div  class = " current-text " ></ div >
     </ div >

     < ul id = " demo-list " ></ ul >

</ form >
     </ div >
</ body >
</ html >

 

 这里是前台的

 后台处理图片如下

代码

  if  (Request.Files.Count  !=   0 )
        {
            HttpFileCollection fc  =  Request.Files;

             for  ( int  i  =   0 ; i  <  fc.Count; i ++ )
            {
                 try
                {
                     object  s  =  fc[i];
                    System.Web.HttpPostedFile pf  =  (System.Web.HttpPostedFile)s;
                    pf.SaveAs(Server.MapPath( " pic/ "   +  pf.FileName));
                     // Image img=new Image( );
                     // img.ImageUrl = Server.MapPath("pic/" + pf.FileName);
                     // img.Width
                     // Response.Write("{\"width\":\"10249\",\"height\":\"51\",\"mime\":\"42.4000\"}");
                    Response.Write( " {\ " status\ " :\ " 1 \ " ,\ " name\ " :\ " \ " ,\ " hash\ " :\ " \ " ,\ " width\ " :250,\ " height\ " :12,\ " mime\ " :\ " image\ " } " );
                }
                 catch
                {
                    Response.Write( " {\ " status\ " :\ " 1 \ " ,\ " name\ " :\ " \ " ,\ " hash\ " :\ " \ " ,\ " width\ " :250,\ " height\ " :12,\ " mime\ " :\ " image\ " } " );
                }
            }
        }
         else
        {
             string  s  =   " something wrong " ;
        }

 

 

好了这里就处理完了

应该来说还是很有效果 

图：

 

 

 

转载于:https://www.cnblogs.com/keepsilence/archive/2009/12/12/1622512.html