SlickUpload Quick Start Guide
Quick Start Guide
The SlickUpload quick start demonstrates how to install SlickUpload in a new or existing application, add upload support to a page, and display a list of the files that were uploaded.
You can find the completed source code for this example in the Quickstart folder in the SlickUpload package. Choose the solution that matches the VS.NET version and view engine technology you want to use.
This article is written with C# code samples for brevity, but VB versions of the completed code are available in the Quickstart folder of the SlickUpload package.
TIP: When you're going to copy paste the code from a code snippet below, here's the easy way: double click anywhere within the snippet box. This will select all of the code for any code snippet so you can easily copy it to the clipboard.
Create a New Project
Open VS.NET and create a new web project. This tutorial applies to VS 2005, VS 2008, and VS 2010, with .NET 2.0, .NET 3.5, or .NET 4.0. There are sections applicable to WebForms, MVC, and Razor. Select your preferred configuration and create a new project of that type.
You can also use this tutorial to add SlickUpload to an existing application.
Install SlickUpload
If you haven't already, go to the SlickUpload download page and download the latest version of SlickUpload. Once you've done that, install SlickUpload in your application as outlined in the Installing SlickUpload topic. These steps will be the same no matter what type of project you select above.
After you complete these steps, you should end up with the Krystalware.SlickUpload.dll as a reference in your application and a web.config that looks something like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<? xml version = "1.0" ?> < configuration > < configSections > < section name = "slickUpload" type = "Krystalware.SlickUpload.Configuration.SlickUploadSection, Krystalware.SlickUpload" requirePermission = "false" /> </ configSections > < slickUpload > < uploadProfiles > < add name = "quickStart" > < uploadStreamProvider type = "File" location = "~/Files" existingAction = "Overwrite" /> </ add > </ uploadProfiles > </ slickUpload > < system.web > < compilation debug = "true" > </ compilation > <!-- The <authentication> section enables configuration of the security authentication mode used by ASP.NET to identify an incoming user. --> < authentication mode = "Windows" /> <!-- The <customErrors> section enables configuration of what to do if/when an unhandled error occurs during the execution of a request. Specifically, it enables developers to configure html error pages to be displayed in place of a error stack trace. <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm"> <error statusCode="403" redirect="NoAccess.htm" /> <error statusCode="404" redirect="FileNotFound.htm" /> </customErrors> --> < httpModules > < add name = "SlickUploadModule" type = "Krystalware.SlickUpload.Web.SlickUploadModule, Krystalware.SlickUpload" /> </ httpModules > </ system.web > <!-- The system.webServer section is required for running under IIS 7 integrated mode. It is not necessary for previous versions of IIS or the VS.NET WebDev server. --> < system.webServer > < validation validateIntegratedModeConfiguration = "false" /> < modules runAllManagedModulesForAllRequests = "true" > < add name = "SlickUploadModule" type = "Krystalware.SlickUpload.Web.SlickUploadModule, Krystalware.SlickUpload" preCondition = "integratedMode" /> </ modules > </ system.webServer > <!-- Enable large requests to SlickUpload's handler --> < location path = "SlickUpload.axd" > < system.webServer > < security > < requestFiltering > < requestLimits maxAllowedContentLength = "2072576000" /> </ requestFiltering > </ security > </ system.webServer > </ location > </ configuration > |
Select View Technology
The rest of the tutorial is specific to the type of project you created above. If you created a normal ASP.NET application, or don't know the other types, use the WebForms tutorial. The following tutorials are available:
ASP.NET WebForms Quick Start
This section will guide you through adding the SlickUpload control to your ASP.NET WebForms application and handling uploads from it.
Add the SlickUpload control to your page
In the designer, drag a SlickUpload control from the toolbox onto your page:
As you drag-drop the control, it will automatically add default templates for file selection, file display, and progress display. You can fully customize any of these templates, as well as completely restyling the entire control. For now leave them with the defaults.
To set up a very basic theme for the control, add the following css to your <head> block:
1234567891011121314151617181920212223242526<
style
type
=
"text/css"
>
/* hide initially */
.su-fileselector, .su-folderselector, .su-filelisttemplate, .su-uploadprogressdisplay
{
display: none;
zoom:1;
}
/* fileselector cursor, link color */
.su-fileselector, .su-fileselector *, .su-folderselector, .su-folderselector *
{
color:blue;
cursor:pointer;
}
/* hover links */
a
{
text-decoration:none
}
a:hover, .su-hover a
{
text-decoration:underline;
}
</
style
>
Submitting the upload
To submit the upload, you'll need a submission button. This can be any ASP.NET element that causes a postback or form submission. In this case, we'll use a simple button:
- From the HTML toolbox section, drag a Horizontal Rule onto your page below the SlickUpload control.
- From the Standard toolbox section, drag a Button below the horizontal rule.
- Set its ID property to "uploadButton".
- Set its Text property to "Upload".
Displaying the upload results
- Add a couple of lines of empty space after the Upload button.
- From the Standard toolbox section, drag a Label onto your page after the empty space.
- Clear its Text property and set its ID property to "uploadResult".
- From the Data toolbox section, drag a Repeater onto your page after the empty space.
- Set its ID property to "uploadFileList".
- Set its EnableViewState property to "false".
- Switch to source view and copy the following templates in between the <asp:Repeater> begin and end tags:
1
2
3
|
< HeaderTemplate >< ul ></ HeaderTemplate > < ItemTemplate >< li ><%# DataBinder.Eval(Container.DataItem, "ClientName")%></ li ></ ItemTemplate > < FooterTemplate ></ ul ></ FooterTemplate > |
Handling the upload
To handle the upload and display the results in the upload results box, add some handler code for the UploadComplete event.
- Double-click the SlickUpload control to add and go to an event handler for the UploadComplete event.
- Add the following namespace imports at the top of the code file:
1
using
Krystalware.SlickUpload;
- Add the following code inside the UploadComplete event handler:
12345678910
uploadResult.Text =
"Upload Result: "
+ e.UploadSession.State.ToString();
if
(e.UploadSession.State == UploadState.Error)
uploadResult.Text +=
". Error: "
+ e.UploadSession.ErrorSummary;
if
(e.UploadSession.State == UploadState.Complete)
{
uploadFileList.DataSource = e.UploadSession.UploadedFiles;
uploadFileList.DataBind();
}
Adding a cancel button
At this point the code can handle uploads and display the files that were uploaded, but there is no way to cancel an upload in progress. To do this, add a cancel button and wire it up with some javascript:
- Switch to source view and add the following javascript inside the <head> tag on your page:
123456
<script type="text/javascript">
function
cancelUpload()
{
kw(
"<%=SlickUpload1.ClientID %>"
).cancel();
}
</script>
This code gets a reference to the SlickUpload control on the page (modify the SlickUpload1 reference to refer to the ID if you have changed it) and calls the cancel method to cancel the upload.
- From the Standard toolbox section, drag a Button onto your page after the Upload button.
- Set its ID property to "cancelButton".
- Set its Text property to "Cancel".
- Set its OnClientClick property to "cancelUpload();return false;". This will call the cancel upload function and then return false to cancel ASP.NET's automatic page postback and allow the cancellation to execute.
Showing and hiding buttons during upload
The sample is now fully functional, but both buttons are always visible. Instead, we want the Upload button to be hidden during uploads, and the Cancel button to be hidden until an upload is started and then displayed. To do this, we handle a couple of SlickUpload events.
- Add the following javascript to the script block we added in the last step:
12345678910
function
onSessionStarted(data)
{
document.getElementById(
"<%=uploadButton.ClientID %>"
).style.display =
"none"
;
document.getElementById(
"<%=cancelButton.ClientID %>"
).style.display =
"block"
;
}
function
onBeforeSessionEnd(data)
{
document.getElementById(
"<%=cancelButton.ClientID %>"
).style.display =
"none"
;
}
- Add the following attributes to the SlickUpload control. This will hook up the event handlers above. onSessionStarted will be called as the upload starts, and onBeforeSessionEnd will be called once the session is complete and the completion handler is being executed.
1
OnClientUploadSessionStarted="onSessionStarted" OnClientBeforeSessionEnd="onBeforeSessionEnd"
- Switch to source view and add the following style attribute inside cancel button. This will hide the cancel button until the upload starts.
1
style="display:none"
This concludes the ASP.NET WebForms specific instructions. To view screenshots of how the Quick Start sample should look in action, go to the Testing section.
ASP.NET MVC WebForms Quick Start
This section will guide you through adding the SlickUpload control to your ASP.NET MVC application using the WebForms view engine and handling uploads from it.
Add the SlickUpload control to your page
- Open the Index view for the Home controller. If you don't have this controller or view, go ahead and add a Home controller with an Index view.
- Set the page model type to UploadSession by setting Inherits="System.Web.Mvc.ViewPage<Krystalware.SlickUpload.UploadSession>" in the Page directive.
- Add the following namespace imports:
123
<%
@ Import Namespace=
"Krystalware.SlickUpload"
%>
<%
@ Import Namespace=
"Krystalware.SlickUpload.Web"
%>
<%
@ Import Namespace=
"Krystalware.SlickUpload.Web.Mvc"
%>
- Replace everything inside the MainContent ContentPlaceHolder with the following:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
<%
using
(Html.BeginForm(
"Index"
,
"Home"
, FormMethod.Post,
new
{ id =
"uploadForm"
, enctype =
"multipart/form-data"
})) {
%>
<%
Html.KrystalwareWebForms(
new
SlickUpload() {
Id =
"slickUpload"
,
FileSelectorHtmlAttributes =
new
{ Style =
"float:left;padding-right:1em"
},
FileListHtmlAttributes =
new
{ Style =
"clear:both"
},
UploadProgressDisplayHtmlAttributes =
new
{ Style =
"clear:both"
},
HtmlAttributes =
new
{ Style =
"overflow: hidden; zoom: 1"
},
UploadProfile =
"quickStart"
,
ShowDropZoneOnDocumentDragOver =
true
,
AutoUploadOnSubmit =
true
,
UploadFormId =
"uploadForm"
,
SelectorTemplate =
new
Template(() => {
%>
<
a
href
=
"javascript:;"
>Add files</
a
>
<%
}),
SelectorFolderTemplate =
new
Template(() => {
%>
<
a
href
=
"javascript:;"
>Add folder</
a
>
<%
}),
FileItemTemplate =
new
Template(() => {
%>
<%
Html.KrystalwareWebForms(
new
FileListElement() { Element = FileListElementType.FileName });
%>
–
<%
Html.KrystalwareWebForms(
new
FileListElement() { Element = FileListElementType.FileSize, Template =
new
Template(
"(calculating)"
) });
%>
<%
Html.KrystalwareWebForms(
new
FileListRemoveCommand() { HtmlAttributes =
new
{ href =
"javascript:;"
}, Template =
new
Template(
"[x]"
) });
%>
<%
Html.KrystalwareWebForms(
new
FileListElement() { Element = FileListElementType.ValidationMessage, HtmlAttributes =
new
{ style =
"color:#f00"
} });
%>
<%
}),
ProgressTemplate =
new
Template(() => {
%>
<
div
>
Uploading
<%
Html.KrystalwareWebForms(
new
UploadProgressElement() { Element = UploadProgressElementType.FileCount });
%>
file(s),
<%
Html.KrystalwareWebForms(
new
UploadProgressElement() { Element = UploadProgressElementType.ContentLengthText, Template =
new
Template(
"(calculating)"
) });
%>
.
</
div
>
<
div
>
Currently uploading:
<%
Html.KrystalwareWebForms(
new
UploadProgressElement() { Element = UploadProgressElementType.CurrentFileName });
%>
file
<%
Html.KrystalwareWebForms(
new
UploadProgressElement() { Element = UploadProgressElementType.CurrentFileIndex });
%>
of
<%
Html.KrystalwareWebForms(
new
UploadProgressElement() { Element = UploadProgressElementType.FileCount });
%>
.
</
div
>
<
div
>
Speed:
<%
Html.KrystalwareWebForms(
new
UploadProgressElement() { Element = UploadProgressElementType.SpeedText, Template =
new
Template(
"(calculating)"
) });
%>
</
div
>
<
div
>
<%
Html.KrystalwareWebForms(
new
UploadProgressElement() { Element = UploadProgressElementType.TimeRemainingText, Template =
new
Template(
"(calculating)"
) });
%>
</
div
>
<
div
style
=
"border: 1px solid #008800; height: 1.5em; position: relative;"
>
<%
Html.KrystalwareWebForms(
new
UploadProgressBar() { HtmlAttributes =
new
{ style =
"background-color:#00ee00;width:0; height:1.5em;"
} });
%>
<
div
style
=
"text-align: center; position: absolute; top: .15em; width: 100%;"
>
<%
Html.KrystalwareWebForms(
new
UploadProgressElement() { Element = UploadProgressElementType.PercentCompleteText, Template =
new
Template(
"(calculating)"
) });
%>
</
div
>
</
div
>
<%
})
});
%>
<%
Html.KrystalwareWebForms(
new
KrystalwareScriptRenderer());
%>
<%
}
%>
This defines a container form, renders the SlickUpload control, and inserts the SlickUpload javascript on the page.
The code above is a default set of templates for file selection, file display, and progress display. You can fully customize any of these templates, as well as completely restyling the entire control. For now leave them with the defaults.
To set up a very basic theme for the control, add the following css to your <head> block:
1234567891011121314151617181920212223242526<
style
type
=
"text/css"
>
/* hide initially */
.su-fileselector, .su-folderselector, .su-filelisttemplate, .su-uploadprogressdisplay
{
display: none;
zoom:1;
}
/* fileselector cursor, link color */
.su-fileselector, .su-fileselector *, .su-folderselector, .su-folderselector *
{
color:blue;
cursor:pointer;
}
/* hover links */
a
{
text-decoration:none
}
a:hover, .su-hover a
{
text-decoration:underline;
}
</
style
>
Submitting the upload
To submit the upload, you'll need a submission button. This can be any element that causes a postback or form submission. In this case, we'll use a simple button:
- Add the following code just before the end of the form, and just after the KrystalwareScriptRenderer statement:
1234
<
hr
/>
<
p
>
<
input
type
=
"submit"
value
=
"Upload"
id
=
"uploadButton"
/>
</
p
>
Displaying the upload results
- Add the following code just before the end of the form, and just after the upload button:
123456789101112131415
<%
if
(Model !=
null
) {
%>
Upload Result:
<%
:Model.State.ToString()
%>
<%
if
(Model.State == UploadState.Error) {
%>
<
br
/>
<
br
/>
Message:
<%
:Model.ErrorSummary
%>
<%
}
%>
<
ul
>
<%
foreach
(UploadedFile file
in
Model.UploadedFiles) {
%>
<
li
>
<%
:file.ClientName
%>
</
li
>
<%
}
%>
</
ul
>
<%
}
%>
Handling the upload
To handle the upload and display the results in the upload results box, we'll need to tweak the code in the HomeController.
- Open the HomeController.
- Add the following namespace imports at the top of the code file:
1
using
Krystalware.SlickUpload;
- Replace the Index action method with the following:
1234
public
ActionResult Index(UploadSession session)
{
return
View(session);
}
Adding a cancel button
At this point the code can handle uploads and display the files that were uploaded, but there is no way to cancel an upload in progress. To do this, add a cancel button and wire it up with some javascript:
- Add the following javascript at the top of the page (or inside the <head> tag) on your page:
123456
<script type="text/javascript">
function
cancelUpload()
{
kw(
"slickUpload"
).cancel();
}
</script>
This code gets a reference to the SlickUpload control on the page (modify the slickUpload reference to refer to the ID if you have changed it) and calls the cancel method to cancel the upload.
- Add the following code just after the upload button:
1
<
input
type
=
"button"
value
=
"Cancel"
id
=
"cancelButton"
onclick
=
"cancelUpload()"
/>
Showing and hiding buttons during upload
The sample is now fully functional, but both buttons are always visible. Instead, we want the Upload button to be hidden during uploads, and the Cancel button to be hidden until an upload is started and then displayed. To do this, we handle a couple of SlickUpload events.
- Add the following javascript to the script block we added in the last step:
12345678910
function
onSessionStarted(data)
{
document.getElementById(
"uploadButton"
).style.display =
"none"
;
document.getElementById(
"cancelButton"
).style.display =
"block"
;
}
function
onBeforeSessionEnd(data)
{
document.getElementById(
"cancelButton"
).style.display =
"none"
;
}
- Add the following attributes to the SlickUpload control. This will hook up the event handlers above. onSessionStarted will be called as the upload starts, and onBeforeSessionEnd will be called once the session is complete and the completion handler is being executed.
12
OnClientUploadSessionStarted=
"onSessionStarted"
,
OnClientBeforeSessionEnd=
"onBeforeSessionEnd"
- Add the following style attribute inside the cancel button. This will hide the cancel button until the upload starts.
1
style="display:none"
This concludes the ASP.NET MVC WebForms specific instructions. To view screenshots of how the Quick Start sample should look in action, go to the Testing section.
ASP.NET MVC Razor Quick Start
This section will guide you through adding the SlickUpload control to your ASP.NET MVC application using the Razor view engine and handling uploads from it.
Add the SlickUpload control to your page
- Open the Index view for the Home controller. If you don't have this controller or view, go ahead and add a Home controller with an Index view.
- Set the page model type to UploadSession by setting the "@model Krystalware.SlickUpload.UploadSession directive".
- Add the following namespace imports:
123
@using Krystalware.SlickUpload;
@using Krystalware.SlickUpload.Web;
@using Krystalware.SlickUpload.Web.Mvc;
- Replace all of the body content on the page with the following:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" }))
{
@Html.KrystalwareRazor(new SlickUpload()
{
Id = "slickUpload",
FileSelectorHtmlAttributes = new { Style = "float:left;padding-right:1em" },
FileListHtmlAttributes = new { Style = "clear:both" },
UploadProgressDisplayHtmlAttributes = new { Style = "clear:both" },
HtmlAttributes = new { Style = "overflow: hidden; zoom: 1" },
UploadProfile = "quickStart",
ShowDropZoneOnDocumentDragOver = true,
AutoUploadOnSubmit = true,
UploadFormId = "uploadForm",
SelectorTemplate = new Template(@<
text
> <
a
href
=
"javascript:;"
>Add files</
a
></
text
>),
SelectorFolderTemplate = new Template(@<
text
> <
a
href
=
"javascript:;"
>Add folder</
a
></
text
>),
FileItemTemplate = new Template(@<
text
>
@Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.FileName })
–
@Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.FileSize, Template = new Template("(calculating)") })
@Html.KrystalwareRazor(new FileListRemoveCommand() { HtmlAttributes = new { href = "javascript:;" }, Template = new Template("[x]") })
@Html.KrystalwareRazor(new FileListElement() { Element = FileListElementType.ValidationMessage, HtmlAttributes = new { style = "color:#f00" } })
</
text
>),
ProgressTemplate = new Template(@<
text
>
<
div
>
Uploading @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.FileCount })
file(s),
@Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.ContentLengthText, Template = new Template("(calculating)") }).
</
div
>
<
div
>
Currently uploading: @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileName })
file @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.CurrentFileIndex })
of @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.FileCount }).
</
div
>
<
div
>
Speed: @Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.SpeedText, Template = new Template("(calculating)") })
</
div
>
<
div
>
@Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.TimeRemainingText, Template = new Template("(calculating)") })
</
div
>
<
div
style
=
"border: 1px solid #008800; height: 1.5em; position: relative;"
>
@Html.KrystalwareRazor(new UploadProgressBar() { HtmlAttributes = new { style = "background-color:#00ee00;width:0; height:1.5em;" } })
<
div
style
=
"text-align: center; position: absolute; top: .15em; width: 100%;"
>
@Html.KrystalwareRazor(new UploadProgressElement() { Element = UploadProgressElementType.PercentCompleteText, Template = new Template("(calculating)") })
</
div
>
</
div
>
</
text
>)
})
@Html.KrystalwareRazor(new KrystalwareScriptRenderer())
}
This defines a container form, renders the SlickUpload control, and inserts the SlickUpload javascript on the page.
The code above is a default set of templates for file selection, file display, and progress display. You can fully customize any of these templates, as well as completely restyling the entire control. For now leave them with the defaults.
To set up a very basic theme for the control, add the following css to your <head> block:
1234567891011121314151617181920212223242526<
style
type
=
"text/css"
>
/* hide initially */
.su-fileselector, .su-folderselector, .su-filelisttemplate, .su-uploadprogressdisplay
{
display: none;
zoom:1;
}
/* fileselector cursor, link color */
.su-fileselector, .su-fileselector *, .su-folderselector, .su-folderselector *
{
color:blue;
cursor:pointer;
}
/* hover links */
a
{
text-decoration:none
}
a:hover, .su-hover a
{
text-decoration:underline;
}
</
style
>
Submitting the upload
To submit the upload, you'll need a submission button. This can be any element that causes a postback or form submission. In this case, we'll use a simple button:
- Add the following code just before the end of the form, and just after the KrystalwareScriptRenderer statement:
1234
<
hr
/>
<
p
>
<
input
type
=
"submit"
value
=
"Upload"
id
=
"uploadButton"
/>
</
p
>
Displaying the upload results
- Add the following code just before the end of the form, and just after the upload button:
1234567891011121314151617
if (Model != null)
{
<
text
>Upload Result: </
text
>@Model.State.ToString()
if (Model.State == UploadState.Error) {
<
br
/>
<
br
/>
<
text
> Message: </
text
>@Model.ErrorSummary
}
<
ul
>
@foreach (UploadedFile file in Model.UploadedFiles)
{
<
li
>
@file.ClientName
</
li
>
}
</
ul
>
}
Handling the upload
To handle the upload and display the results in the upload results box, we'll need to tweak the code in the HomeController.
- Open the HomeController.
- Add the following namespace imports at the top of the code file:
1
using
Krystalware.SlickUpload;
- Replace the Index action method with the following:
1234
public
ActionResult Index(UploadSession session)
{
return
View(session);
}
Adding a cancel button
At this point the code can handle uploads and display the files that were uploaded, but there is no way to cancel an upload in progress. To do this, add a cancel button and wire it up with some javascript:
- Add the following javascript at the top of the page (or inside the <head> tag) on your page:
123456
<script type="text/javascript">
function
cancelUpload()
{
kw(
"slickUpload"
).cancel();
}
</script>
This code gets a reference to the SlickUpload control on the page (modify the slickUpload reference to refer to the ID if you have changed it) and calls the cancel method to cancel the upload.
- Add the following code just after the upload button:
1
<
input
type
=
"button"
value
=
"Cancel"
id
=
"cancelButton"
onclick
=
"cancelUpload()"
/>
Showing and hiding buttons during upload
The sample is now fully functional, but both buttons are always visible. Instead, we want the Upload button to be hidden during uploads, and the Cancel button to be hidden until an upload is started and then displayed. To do this, we handle a couple of SlickUpload events.
- Add the following javascript to the script block we added in the last step:
12345678910
function
onSessionStarted(data)
{
document.getElementById(
"uploadButton"
).style.display =
"none"
;
document.getElementById(
"cancelButton"
).style.display =
"block"
;
}
function
onBeforeSessionEnd(data)
{
document.getElementById(
"cancelButton"
).style.display =
"none"
;
}
- Add the following attributes to the SlickUpload control. This will hook up the event handlers above. onSessionStarted will be called as the upload starts, and onBeforeSessionEnd will be called once the session is complete and the completion handler is being executed.
12
OnClientUploadSessionStarted=
"onSessionStarted"
,
OnClientBeforeSessionEnd=
"onBeforeSessionEnd"
- Add the following style attribute inside the cancel button. This will hide the cancel button until the upload starts.
1
style="display:none"
This concludes the ASP.NET MVC Razor specific instructions. To view screenshots of how the Quick Start sample should look in action, go to the Testing section.
Testing
You now have a fully functioning application that can accept file uploads. The running version should look something like the following screenshots.
Selecting files
Click on the add files link to start adding files. Pick a few files and they will show up in the list.
Uploading files
Click the Upload button to start the upload.
Displaying uploaded files
Once the upload is complete, you'll see a list of the files that have been uploaded. You can also see the files themselves in the ~/Files folder.
SlickUpload Quick Start Guide的更多相关文章
- RF《Quick Start Guide》操作总结
这篇文章之所以会给整理出来,是因为学了一个季度的RF后,再去看官网的这个文档,感触破多,最大的感触还是觉得自己走了不少弯路,还有些是学习方法上的弯路.在未查看这类官网文档之前,更多的是看其他各种人的博 ...
- QUICK START GUIDE
QUICK START GUIDE This page is a guide aimed at helping anyone set up a cheap radio scanner based on ...
- Akka Stream文档翻译:Quick Start Guide: Reactive Tweets
Quick Start Guide: Reactive Tweets 快速入门指南: Reactive Tweets (reactive tweets 大概可以理解为“响应式推文”,在此可以测试下GF ...
- RobotFramework 官方demo Quick Start Guide rst配置文件分析
RobotFramework官方demo Quick Start Guide rst配置文件分析 by:授客 QQ:1033553122 博客:http://blog.sina.com.c ...
- RobotFramework RobotFramework官方demo Quick Start Guide浅析
RobotFramework官方demo Quick Start Guide浅析 by:授客 QQ:1033553122 博客:http://blog.sina.com.cn/ishouk ...
- pax3 quick start guide
pax3 quick start guide 外观图: 配置:1 * pax3 主机:2 * 吸嘴(一个平的,一个凸的):2 * 底盖(一个烟草的,一个烟膏的):3 * 过滤片:1 * USB充:1 ...
- quick start guide for XMEGA ADC
This is the quick start guide for the Analog to Digital Converter (ADC), with step-by-step instructi ...
- [摘录]quarts:Quartz Quick Start Guide
(Primarily authored by Dafydd James) Welcome to the QuickStart guide for Quartz. As you read this gu ...
- Quartz Quick Start Guide
Welcome to the QuickStart guide for Quartz. As you read this guide, expect to see details of: Downlo ...
随机推荐
- windows10 technical preview 无法激活
- Java的基本概念
JAVA的方法签名是 参数类型,参数个数,参数顺序,不包括返回值和访问修饰符. 对象序列化:将一个对象编码成一个字节流.
- AngularJS是什么
先标明来源: https://code.angularjs.org/1.3.15/docs/guide/introduction 也就是官网针对1.3.15版的说明 What Is Angular? ...
- MongoDB学习笔记—02 MongoDB入门
Mongodb的基本概念 文档:是MongoDB中数据的基本单元,类似于关系型数据库中的行. 集合:多个文档组成一个集合,类似于关系型数据库中的表. 数据库:MongoDB的当个实例可以容纳多个独立的 ...
- 主成分分析PCA的前世今生
这篇博客会以攻略形式介绍PCA在前世今生. 其实,主成分分析知识一种分析算法,他的前生:应用场景:后世:输出结果的去向,在网上的博客都没有详细的提示.这里,我将从应用场景开始,介绍到得出PCA结果后, ...
- javascript练习-定义子类
function defineSubclass(superclass, //父类的构造函数 constructor, //新的子类的构造函数 methods, //实例方法:复制至原型中 static ...
- JSON 基础解释.
JSON.(JavaScript Object Notation) JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本 ...
- DECLARE_GLOBAL_DATA_PTR宏定义问题
最近闲着顺便看了看6410的uboot代码,因为友善的boot对nand部分代码做了隐藏,所以干脆找了光盘里面三星原厂的uboot代码来看,因为友善的boot代码肯定也是基于厂商的代码改的,肯定可以的 ...
- java-android推送
之前做的推送,考虑了很多,最后因为各个因素,选择了极光的.
- IOS 获取当前对象所在的VC
id next = [self nextResponder] ; while (next != nil) { next = [next nextResponder]; if ([next isKind ...