Plupload Simple application Multi-image upload display preview and delete

Source: Internet
Author: User
Tags event listener httpcontext

<script>varuploader =NewPlupload. Uploader ({//instantiate an Plupload upload objectBrowse_button: ' Btnbrowse ', URL:' Upload.ashx ', Flash_swf_url:' Resource/scripts/js/moxie.swf ', Silverlight_xap_url:' Resource/scripts/js/moxie.xap ', Filters: {mime_types: [//allow only uploading of picture files{title: "Picture File", Extensions: "Jpg,gif,png" }                    ]                }            }); Uploader.init (); //Initialize            //binding file added to queue eventUploader.bind (' filesadded ',function(uploader, files) {//alert (files[0].size);                varMSGFLG = 0;  for(vari = 0, len = files.length; i < Len; i++) {                    if(Files[i].size > 81920) {Uploader.files.splice (I,1); MSGFLG= 1; }                    Else {                        !function(i) {previewimage (files[i],function(IMGSRC) {$ (' #file-list '). HTML ($ (' #file-list '). html () + ' <div style= "Float:left" class= "pic_list                                    "id=" ' + files[i].id + ' "> ' + ' (' + plupload.formatsize (files[i].size) +                                    ') <a href= "# #" class= "Pic_delete" data-val= ' + files[i].id +  ' > Delete </a><br/> ' + ' </div> ');                    })} (i); }                }                if(MSGFLG = = 1) {alert ("Upload image less than 80K");            }            }); $ (document). On (' Click ', '. Pic_list a.pic_delete ',function () {                $( This). Parent (). remove (); varToremove = ' '; varID = $ ( This). attr ("Data-val");  for(varIinchuploader.files) {if(Uploader.files[i].id = = =ID) {toremove=i; }} uploader.files.splice (Toremove,1);            }); //all uploads are complete .Uploader.bind ("Uploadcomplete",function(uploader, file) {alert (Success); $(' #file-list '). HTML ("");            Exit ();            }); functionexit () {Window.parent.location.href=Window.parent.location.href; }            //Moxie objects are provided for us in the Plupload            //for Moxie's introduction and instructions, see: Https://github.com/moxiecode/moxie/wiki/API            //If you don't want to know so much, then copy the code from this example to the preview image.            functionPreviewimage (file, callback) {//file is the file object in the Plupload event listener function parameter, callback the callback function to prepare the preview image for completion                if(!file | |!/image\//.test (FILE.TYPE))return;//Make sure the file is a picture                if(File.type = = ' Image/gif ') {//gif is previewed using FileReader because moxie.image only supports JPG and PNG                    varFR =NewMoxie.filereader (); Fr.onload=function() {callback (Fr.result);                        Fr.destroy (); Fr=NULL;                } fr.readasdataurl (File.getsource ()); } Else {                    varPreloader =NewMoxie.image (); Preloader.onload=function () {                        //preloader.downsize (550, 400);//compress the picture you want to preview, width 300, height                        varIMGSRC = Preloader.type = = ' Image/jpeg '? Preloader.getasdataurl (' image/jpeg ', +): Preloader.getasdataurl ();//get the picture src, essentially a base64 encoded dataCallback && callback (IMGSRC);//callback incoming parameter is the URL of the preview picturePreloader.destroy (); Preloader=NULL;                    };                Preloader.load (File.getsource ()); }            }            $("#update"). Bind (' click ',function () {                if(Uploader.files.length < 1) {alert (' Please select the picture! ‘); return false;            } uploader.start (); })        </script>

  Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; Context. Response.Write ("Hello World");        UploadFile (context); }        /// <summary>        ///Upload Image/// </summary>        /// <param name= "context" ></param>        Private voidUploadFile (HttpContext context) {Try            {                //Common db time BLLBll. Gettimecommonbusiness COMBLL =NewBLL.                Gettimecommonbusiness (); Context. Response.CacheControl="No-cache"; stringS_rpath ="e:\\newb2b\\04_ Source Code \\B2B.root\\B2B\\WEB\\upload\\resource"; //Save the name of the picture made                stringFlietime = Combll.gettimecommon (121). Replace ("-",""). Replace (":",""). Replace (" ",""). Replace ("/",""). Replace (".",""); stringName = Flietime + context. request["name"]. Substring (context. request["name"]. IndexOf (".") -1, context. request["name"]. Length-context. request["name"]. IndexOf (".") +1); //image Upload                if(Context. Request.Files.Count >0) {Httppostedfile UploadFile= Context. request.files[0]; if(Uploadfile.contentlength >0)                    {                        if(!directory.exists (S_rpath))                        {directory.createdirectory (S_rpath); }} uploadfile.saveas (string. Format ("{0}\\{1}", S_rpath, name)); }                //Add picture Address                if(Context. session["Sl0005edit$photopath"] ==NULL) {ArrayList list=NewArrayList (); List.                    ADD (name); Context. session["Sl0005edit$photopath"] =list; }                Else{ArrayList list= (ArrayList) context. session["Sl0005edit$photopath"]; List.                    ADD (name); Context. session["Sl0005edit$photopath"] =list; }            }            Catch(Exception) {Throw; }        }         Public BOOLisreusable {Get            {                return false; }        }

Plupload Simple application Multi-image upload display preview and delete

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.