First download the Jquery Library core and jquery.smartuploader.js library Click this link
After that add an open a project and add a controller and an action method
public ActionResult Upload()
After that design, our view page and write below code
After that add an open a project and add a controller and an action method
public ActionResult Upload()
{
return View();
}
After that design, our view page and write below code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="~/Scripts/jquery.smartuploader.js"></script>
<link href="~/Content/common.css" rel="stylesheet" />
</head>
<body>
<h2>File Upload Example</h2>
<div id="drop_zone" class="drop-zone">
<p class="title">Drop file here</p>
<div class="preview-container"></div>
</div>
<input id="file_input" accept="image/*" type="file" multiple="" name="file">
<button id="upload_images">Upload</button>
<div id="result_images" class="result-images"></div>
<script>
var fileNamePrefix = "uploads/" + Date.now() + "_";
var result = $("#file_input").withDropZone("#drop_zone", {
done: function (filenames) {
var result = $("#result_images");
var html = [`<b>Your image${filenames.length === 1
? '' : 's:'}</b>`];
for (var i = 0; i < filenames.length; i++) {
$('#result_images').append(fileNamePrefix
+ filenames[i] + '<br />')
html.push(fileNamePrefix +
filenames[i] + '<br />')
}
result.html(html.join("<br/>"));
},
action: function (fileIndex) {
var convertTo;
var extension;
if (this.files[fileIndex].type === "image/png") {
convertTo = {
mimeType: "image/jpeg",
maxWidth: 150,
maxHeight: 150,
};
extension = ".jpg";
}
else {
convertTo = null;
extension = null;
}
return {
name: "image",
rename: function (filenameWithoutExt,
ext, fileIndex) {
return filenameWithoutExt +
(extension || ext)
},
params: {
preview: true,
convertTo: convertTo,
}
}
},
ifWrongFile: "show",
wrapperForInvalidFile: function (fileIndex) {
return `<div style="margin: 20px 0; color:
red;">File: "${this.files[fileIndex].name}" doesn't support</div>`
},
multiUploading: true,
formData: function (fileIndex, blob,
filename) {
var formData = new FormData;
formData.set("key", fileNamePrefix +
filename);
formData.set("file", blob, filename);
return formData
}
});
$("#upload_images").click(result.upload);
$("#upload_images").click(function () {
var data = new FormData();
var files = $("#file_input").get(0).files;
var formData = new FormData();
var totalFiles = $("#file_input").get(0).files;
for (var i = 0; i < files.length; i++) {
formData.append("FileUpload", files[i]);
}
$.ajax({
type: "POST",
url: '/Demo/UploadFiles',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
alert('succes!!');
},
error: function (error) {
alert("errror");
}
});
});
</script>
</body>
</html>
Now add the logic in our controller
public ActionResult UploadFiles()
{
if (Request.Files.Count
> 0)
{
try
{
HttpFileCollectionBase files =
Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFileBase file =
files[i];
string fname;
if (Request.Browser.Browser.ToUpper() == "IE" ||
Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
{
string[] testfiles =
file.FileName.Split(new char[] { '\\' });
fname =
testfiles[testfiles.Length - 1];
}
else
{
fname = file.FileName;
}
fname =
Path.Combine(Server.MapPath("~/Uploads/"), fname);
file.SaveAs(fname);
}
return Json("File Uploaded Successfully!");
}
catch (Exception ex)
{
return Json("Error occurred. Error details: " + ex.Message);
}
}
else
{
return Json("No files
selected.");
}
}
Also give the css for design
<style>
#file_input {
display: none;
}
body {
text-align: center;
}
.drop-zone {
cursor: pointer;
user-select: none;
color: #555;
font-size: 18px;
width: 600px;
padding: 50px 0;
margin: 50px auto;
border: 2px solid darkgray;
border-radius: 5px;
background: white;
}
.drop-zone.hover {
background: #D8D8D8;
border-color: #aaa;
}
.drop-zone.error {
background: #faa;
border-color: #f00;
}
.drop-zone.drop {
background: #D8D8D8;
border-color: #00a1ff;
}
.drop-zone.drop > .title {
display: none;
}
.preview-container canvas {
width: 150px;
}
.file-uploader-progress-bar {
margin: 0 20px;
}
.file-uploader-progress-bar > * {
background-color: #71a5f3;
width: 0;
height: 5px;
border-radius: 5px;
}
.wrapper.uploading.progress {
background-color: #8c8c8c;
}
/*2nd
example*/
#upload_images {
outline: none;
}
#upload_images {
background: #ECECEC;
border-radius: 15px;
padding: 10px 20px;
display: block;
font-family: arial;
font-weight: bold;
color: #7f7f7f;
text-decoration: none;
text-shadow: 0px 1px 0px #fff;
border: 1px solid #a7a7a7;
width: 145px;
margin: 0px auto;
box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s;
}
#upload_images:hover {
box-shadow: 0px 2px 1px white inset, 0px -2px 20px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
}
#upload_images:active {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
background: -webkit-linear-gradient(top, #d1d1d1 0%, #ECECEC 100%);
}
.result-images {
margin-top: 40px;
}
.result-images a {
color: #666666;
}
.result-images a b {
color: black;
}
.converting input, .converting select {
text - align: center;
}
.converting input {
width: 100px;
padding: 5px;
font - size: 14px;
}
.converting select {
padding: 5px;
vertical - align: top;
margin - top: 10px;
}
.converting > * {
margin: 15px 0;
}
.converting select {
outline: none;
box - shadow: inset 0px
1px 0px 0px #ffffff;
background: linear - gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background - color: #ffffff;
border - radius: 6px;
border: 1px solid #dcdcdc;
display: inline - block;
cursor: pointer;
color: #666666;
font - family: Arial;
font - size: 15px;
font - weight: bold;
padding: 11px 29px;
text - decoration: none;
text - shadow: 0px 1px 0px
#ffffff;
}
.converting select:hover {
background: linear - gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background - color: #f6f6f6;
}
</style>
Now run the project
Now click the upload button and check our Image folder
No comments:
Post a Comment