Home > Developer > Web Develop
In the case of 0 configuration, the File upload folder is the Files folder under the root directory, how to customize the File upload folder?
-Configure in Web. config
1: <configuration>
2: <configSections>
3: ...
4: <section name="backload" type="Backload.Configuration.BackloadSection, Backload, version= 1.9.3.1, Culture=neutral, publickeytoken=02eaf42ab375d363 "requirepermission=" false "/>
5: </configSections>
6:
7: <backload xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:name="urn: Fileupload-schema "xsi:nonamespaceschemalocation="Web.FileUpload.xsd ">
8: <filesystem filesroot="~/uploads"/>
9: </backload>
Ten:
One: </configuration>
Version can be found through the right-click Assembly Properties.
PublicKeyToken can be found through the anti-compiler, such as reflector.
-Cancel the index method of Backloaddemocontroller
1: using SYSTEM.WEB.MVC;
2:
3: namespace Mvcapplication6.controllers
4: {5: class Backloaddemocontroller:controller
6: {7: //GET:/backupdemo/
8: //public actionresult Index ()
9: //{Ten: // return View ();
One: //}
: }
: }
:
-Let Basecontroller inherit Backloaddemocontroller and unregister the index method
1: using SYSTEM.WEB.MVC;
2:
3: namespace Mvcapplication6.controllers
4: {5: class Basecontroller:backloaddemocontroller
6: {7: //public actionresult Index ()
8: //{9: // return View ();
Ten: //}
One: }
: }
-Let HomeController inherit Basecontroller
1: using SYSTEM.WEB.MVC;
2:
3: namespace Mvcapplication6.controllers
4: {5: class Homecontroller:basecontroller
6: {7: Public actionresult Index ()
8: {9: return View ();
Ten: }
One: }
: }
:
-_layout.cshtml View
1: <! DOCTYPE html>
2:
3:
4: <meta charset="Utf-8"/>
5: <meta name="viewport" content="Width=device-width"/>
6: <title> @ViewBag .title</title>
7: @Styles. Render ("~/content/css") 8: @Styles. Render ("~/content/themes/base/css") 9: @Styles. Render ("~/bundles/fileupload/bootstrap/basicplusui/css") : @Scripts. Render ("~/bundles/modernizr")One:
:
: <body>
: @RenderBody ()
:
: @Scripts. Render ("~/bundles/jquery") : @Scripts. Render ("~/bundles/jqueryui") : @Scripts. Render ("~/bundles/fileupload/bootstrap/basicplusui/js"): @RenderSection (false)
: </body>
:
:
-home/index.cshtml View
@{viewbag.title = "Index"; Layout = "~/views/shared/_layout.cshtml";} <div> <!--The file upload form used as target for the file upload widget--<form id= "Fileu Pload "action="/backload/uploadhandler "method=" POST "enctype=" Multipart/form-data "> <!--Redirect Browse RS with JavaScript disabled to the Origin page--<noscript><input type= "hidden" name= "redirect" V Alue= "/" ></noscript> <!--the fileupload-buttonbar contains buttons to add/delete files and start/c Ancel the upload--and <div class= "Row Fileupload-buttonbar" > <div class= "Span7" > <!--the Fileinput-button span is used to style the file input field as button-- <span class= "btn btn-success Fileinput-button" > <i class= "icon-plus icon-white" >< ;/i> <span> Add Files ...</span> <input type= "File" Name= "files[]" multiple> </span> <button type= "Submit" class= "btn btn-primary start" > <i class= "icon-upload icon-white" ;</i> <span> start uploading </span> </button> < Button type= "reset" class= "btn btn-warning Cancel" > <i class= "icon-ban-circle icon-white" ;</i> <span> Cancel uploads </span> </button> < Button type= "button" class= "btn btn-danger Delete" > <i class= "Icon-trash icon-white" >< /i> <span> Delete </span> </button> <input type= "checkbox" class= "Toggle" > <!--the loading indicator is shown during file processing- <Span class= "fileupload-loading" ></span> </div> <!--the global progress in Formation--<div class= "Span5 fileupload-progress Fade" > <!--the global p Rogress Bar-to <div class= "Progress progress-success progress-striped Active" role= "ProgressBar" aria-valuemin= "0" aria-valuemax= "+" > <div class= "Bar" style= "width:0%;" ></div> </div> <!--The extended global Progress information--> ; <div class= "progress-extended" > </div> </div> </div> <!--the table listing the files available for upload/download and <table role= "presentation" class= " Table table-striped "><tbody class=" Files "data-toggle=" Modal-gallery "data-target=" #modal-gallery "></ Tbody></table></form> <!--the template to display files available for upload and <script id= "template-up Load "type=" Text/x-tmpl "> {% for (var i=0, file; file=o.files[i]; i++) {%} <tr class=" template-up Load Fade "> <td> <span class=" Preview "></span> </ td> <td> <p class= "name" >{%=file.name%}</p> {% i F (file.error) {%} <div><span class= "label label-important" >Error</span> {%=file .error%}</div> {%}%} </td> <td> &L T;p class= "Size" >{%=o.formatfilesize (file.size)%}</p> {% if (!o.files.error) {%} <div class= "Progress progress-success progress-striped Active" role= "ProgressBar" aria-valuemin= "0" Aria-val uemax= "Aria-valueno"w= "0" ><div class= "bar" style= "width:0%;" ></div></div> {%}%} </td> <td> {% if (!o.files.error &&!i &&!o.options.autoupload) {%} <button class= " BTN btn-primary Start "> <i class=" icon-upload icon-white "></i> <span>Start</span> </button> {%}%} {% if (!i) {%} <button class= "btn btn-warning Cancel" > <i class= "Icon-ban-circle icon-white" ></i> <span>Cancel</span> </button> {%}%} </td> </tr> {%}%} </script> <!--the template to display files available for download-<script id= "Template-download" type= "Text/x-tmpl" > {% for (var i=0, file; file=o.files[i]; i++) {%} <tr class= "Template-download fade" > <td> <span class= "Preview" > {% if (File.thumbnail_url) {%} <a href= "{%=file.url%}" title= "{%=FILE.N ame%} "data-gallery=" Gallery "download=" {%=file.name%} "></a> {%}%} </span> </td> <td> <p class= "name" > <a href= "{%=file.url%}" title= "{%=file.name%}" data-gallery= "{%=file.t humbnail_url&& ' gallery '%} "download=" {%=file.name%} ">{%=file.name%}</a> </p> {% if (file.error) {%} <div><span class= "label Label-important" >error& lt;/span> {%=file.error%}</div> {%}%} </td> <td> <sp An class= "size" >{%=o.formatfilesize (file.size)%}</span> </td> <td> <button class= "btn btn-danger Delete" data-type= "{%=file.delete_type%}" data-url= "{%=file.delete_url%}" { % if (file.delete_with_credentials) {%} data-xhr-fields= ' {"Withcredentials": true} ' {%}%}> < I class= "Icon-trash icon-white" ></i> <span>Delete</span> &L t;/button> <input type= "checkbox" name= "Delete" value= "1" class= "Toggle" > </ td> </tr> {%}%} </script> </div> @section scripts{<script s Rc= "~/scripts/fileupload/backload.demo.js" ></SCRIPT>}
Results
2 files Uploaded:
This time, the picture is uploaded to the uploads folder:
The Uploads folder has just uploaded 2 files:
-If you want the Web. config profile to be relatively "clean", you can put the configuration associated with backload in a separate configuration file
You can do this in Web. config:
1: <configuration>
2: <configSections>
3: ...
4: <section name="backload" type="Backload.Configuration.BackloadSection, Backload, version=1.9.3.1 , Culture=neutral, publickeytoken=02eaf42ab375d363 "requirepermission=" false "/>
5: </configSections>
6:
7: <backload configsource="Web.Backload.config"/>
8: </configuration>
The Web.Backload.config under the root directory can do this:
1: <?xml version="1.0"?>
2: <backload storagecontext="Filesystem" xsi:nonamespaceschemalocation="Web.Backload.xsd" xmlns: Name= "urn:backload-schema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" >
3: <filesystem filesroot="~/uploads"/>
4: </backload>
Customizing the Upload folder using the Jquery.fileupload plugin Kimono backload component
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
