我正在学习ASP.NET MVC文件上传而不刷新页面。 我希望在单击图像时调用文件单击并打开文件选择对话框,然后当用户选择文件时,它会自动开始上传。我正在使用fileupload.js插件上传我的文件。在演示程序中,它运行良好但是当我试图将它嵌入我的程序时,它无法正常工作。 问题似乎出现在我的_Layout页面中,我引用了文件路径。 我不知道我做错了什么,但我已经尝试了一切。 请帮帮我,提前谢谢。
_Layout Page:
Head @ViewBag.Title .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { text-decoration: none; background-color: #AD6800; } Body //WOW Scroll Spy var wow = new WOW({ //disabled for mobile mobile: false }); wow.init(); $(function () { $(".dropdown").hover( function () { $('.dropdown-menu', this).stop(true, true).fadeIn("fast"); $(this).toggleClass('open'); //$('b', this).toggleClass("caret caret-up"); }, function () { $('.dropdown-menu', this).stop(true, true).fadeOut("fast"); $(this).toggleClass('open'); //$('b', this).toggleClass("caret caret-up"); }); });
这是我的观点
@{ ViewBag.Title = "SignUp"; Layout = "~/Views/Shared/_Layout.cshtml"; } @ViewBag.Message @ViewBag.Logout $(document).ready(function () { var progress = 0; $('#mychart').hide(); debugger $('#fileupload').fileupload({ dataType: 'json', url: '/FileUploader/UploadFiles', autoUpload: true, done: function (e, data) { debugger $("#dp").attr("src", data.result.url); } }).on('fileuploadprogressall', function (e, data) { debugger $('#mychart').show(); progress = parseInt(data.loaded / data.total * 100, 10); //$('.progress .progress-bar').css('width', progress + '%'); $('.chart').easyPieChart({ onStep: function (from, to, percent) { $(this.el).find('.percent').text(Math.round(progress)); } }); var chart = window.chart = $('.chart').data('easyPieChart'); chart.update(progress); if (progress == 100) { setTimeout(function () { $('#mychart').fadeOut("slow") }, 1500); } }); }); $("#success").hide(); $("#failure").hide(); function validateEmail() { //$("#customimage").show(); var email = $("#email").val(); $.ajax({ type: "POST", url: "/Account/validateEmail", data: { email: email }, //dataType: "html", success: function (response) { //$("#customimage").hide(); if (response == "Success") { debugger $("#success").show(); } else { debugger $("#failure").show(); } } }); } //Open Image upload dialog on Clicking Image function trigerClick() { $('#fileupload').trigger('click'); } //On image hover show upload image $('#profileimage').hover( function () { $('.caption').fadeIn(2500); //.fadeIn(250) } ); $('#profileimage').mouseleave( function () { $('.caption').fadeOut(2500); //.fadeOut(205) } );
和我的控制器
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ProjectFirstStep.Models; using System.IO; namespace ProjectFirstStep.Controllers { public class FileUploaderController : Controller { Project1stStepEntities db = new Project1stStepEntities(); // // GET: /FileUploader/ public ActionResult Index() { return View(); } [HttpPost] public ContentResult UploadFiles() { TempImgTable image = new TempImgTable(); foreach (string file in Request.Files) { HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase; if (hpf.ContentLength == 0) continue; string savedFileName = Path.Combine(Server.MapPath("~/Images"), Path.GetFileName(hpf.FileName)); image.name = hpf.FileName; image.path = savedFileName.Replace("\", "/").Replace("C:/Users/ali.mohsin/Desktop/New Folder (3)/FileUploadMVC4/", "/").ToString(); db.TempImgTables.Add(image); db.SaveChanges(); hpf.SaveAs(savedFileName); } return Content("{"url":"" + image.path + ""}", "application/json"); } } }
我用过的剧本就在这里
以上就是jQuery教程分享fileupload.js插件函数.fileupload()不起作用相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/558622.html