fileupload.js插件函数.fileupload（）无效

时间：2017-03-25 06:25:51

标签： javascript jquery asp.net file-upload

我正在学习ASP.NET MVC文件上传而不刷新页面。我希望在单击图像时调用文件单击并打开文件选择对话框，然后当用户选择文件时，它会自动开始上传。我正在使用fileupload.js插件上传我的文件。在演示程序中它运行良好但是当我试图将它嵌入我的程序时，它无法正常工作。问题似乎出现在我的_Layout页面中，我引用了文件路径。我不知道我做错了什么，但我已经尝试了一切。请帮助我，提前致谢。

_Layout Page： 

    <!DOCTYPE html>
Head
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Ali Mohsin">
    <!-- FavIcon -->
    <link rel="shortcut icon" type="image/png" href="~/Content/Images/Icons/favicon.png" />
    <title>@ViewBag.Title</title>
    <!-- Bootstrap Core CSS -->

    <link href="~/Content/Css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <!-- Custom CSS -->
    <link href="~/Content/Css/the-big-picture.css" rel="stylesheet">
    <link href="~/Content/Css/jquery.fileupload.css" rel="stylesheet" />
    <link href="~/Content/Css/font-icon.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Css/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Css/flexslider.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Css/main.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Css/responsive.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/Css/animate.min.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css" />

    <!-- ============ Google fonts ============ -->
    <link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet'
          type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300,800'
          rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/Content/Css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Advent+Pro:600" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="https://fonts.googleapis.com/css?family=Quicksand:500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet">
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.10.3.min.js"></script>
    <link href="~/Content/Css/jquery-ui.min.css" rel="stylesheet" />

    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <link href="~/Content/Css/Toast.css" rel="stylesheet" />


    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <script src="~/Scripts/jquery.fileupload.js"></script>
    <style>
        .dropdown-menu > li > a:hover,
        .dropdown-menu > li > a:focus {
            text-decoration: none;
            background-color: #AD6800;
        }
    </style>

</head>

Body
<body>
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.easing.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.flexslider-min.js"></script>
    <script src="~/Scripts/jquery.fancybox.pack.js"></script>
    <script src="~/Scripts/wow.js" type="text/javascript"></script>
    <script src="~/Scripts/retina.min.js"></script>
    <script src="~/Scripts/modernizr.js"></script>
    <script src="~/Scripts/main.js"></script>

    <script src="~/Scripts/jquery.ui.widget.js"></script>
    <script src="~/Scripts/jquery.easypiechart.min.js"></script>
    <script type="text/javascript">
        //WOW Scroll Spy
        var wow = new WOW({
            //disabled for mobile
            mobile: false
        });
        wow.init();
    </script>
    <script type="text/javascript">
        $(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");
                    });
        });
    </script>
</body>

这是我的观点

    @{
    ViewBag.Title = "SignUp";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="container">

    <div id="loginbox" style="margin-top: 10%; margin-bottom: 05%;" class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        <div class="panel panel-default" style="background-color:#d9d9d9">
            <div class="panel-heading" style="background-color: #FF9900">
                <div class="panel-title text-center">@ViewBag.Message @ViewBag.Logout </div>
            </div>
            <div style="padding-top:30px; border:2px;" class="panel-body">

                <!-- Place the anchor tag here to cover both your caption and image -->
                <div class="profilepic">
                    <a id="OpenImgUpload" onclick="trigerClick()">

                        <div class="caption">
                            <br /><br /><br />
                            <h4 class="" style="color:white">Profile Picture</h4>

                            <p class="" style="color:white">
                                Upload your profile picture by clicking this Image.
                            </p>
                        </div>

                        <img src="~/Images/WebIcons/user.png" id="profileimage" class="img-responsive img-circle" width="250" style="margin-left:28%">
                    </a>
                </div>
                <div class="container" id="mychart">
                    <span class="chart" data-percent="0">
                        <span class="percent"></span>
                    </span>
                </div>

                <!-- Anchor tag ends covering both image and caption -->
            </div>

            <input id="fileupload" type="file" name="files[]" style="display:none" />


            <form class="form-horizontal" role="form" action="~/Account/CreateAccount" method="post">
                @Html.AntiForgeryToken()
                Email:
                <div style="margin-bottom: 25px" class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user" style="color:black;"></i></span>
                    <input type="email" class="form-control" name="email" placeholder="Email" style="color:black;" required onblur="validateEmail()" id="email"> <span class="input-group-addon" id="addin"><i class="glyphicon glyphicon-ok" style="color:green;" id="success"></i> <i class="glyphicon glyphicon-remove" style="color:red;" id="failure"></i></span>
                </div>
                Password:
                <div style="margin-bottom: 25px" class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock" style="color:black;"></i></span>
                    <input type="password" class="form-control" name="password" placeholder="Password" style="color:black;" required>
                </div>
                Full Name:
                <div style="margin-bottom: 25px" class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user" style="color:black;"></i></span>
                    <input type="text" class="form-control" name="name" placeholder="Full Name" style="color:black;" required>
                </div>

                Default: Free
                <div style="margin-bottom: 25px" class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-heart-empty" style="color:black;"></i></span>
                    <select class="form-control" name="account">
                        <option value="Free">Account Type</option>
                        <option value="Free">Free</option>
                        <option value="Premium">Premium</option>
                    </select>
                </div>

                Format: 03331234123
                <div style="margin-bottom: 25px" class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-phone" style="color:black;"></i></span>
                    <input type="number" class="form-control" name="mobile" placeholder="Mobile Number" style="color:black;" required min="03000000001" max="03479999999">
                </div>

                Default: Lahore
                <div style="margin-bottom: 25px" class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-heart-empty" style="color:black;"></i></span>
                    <select class="form-control" name="city">
                        <option value="Lahore">City</option>
                        <option value="Islamabad">Islamabad</option>
                        <option value="Karachi">Karachi</option>
                        <option value="Lahore">Lahore</option>
                        <option value="Pishawar">Pishawar</option>
                        <option value="Queta">Queta</option>
                    </select>
                </div>


                <div style="margin-top:10px" class="form-group">
                    <!-- Button -->
                    <div class="col-md-12 col-sm-12 controls  text-center">
                        <button type="submit" class="btn btn-borderwhite btn-block">Sign Up  </button>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-12 control">
                        <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%">
                            Already Have an account? <a href="~/Account/Login">Login </a> here.
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>



<script type="text/javascript">

    $(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)
        }
);


</script>

和我的控制器

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");
        }
    }
}

我使用的脚本全是here

0 个答案:

没有答案
相关问题
最新问题