C#Ajax文件上传,当调用Saveas方法时,上传页面会自动刷新,否则工作正常

时间:2018-01-30 08:36:12

标签: c# ajax file-upload response mv

我认为回复有问题

在正常情况下,如果没有saveas()函数,可以添加多个文件

enter image description here

调用saveas()函数后 - 页面不必要地刷新

enter image description here

    [HttpPost]
    public string UploadFiles(HttpPostedFileBase upl, int EventID)
    {
        var EventName = db.EventTbls.Where(x => x.EventID == EventID).FirstOrDefault().EventName;
        try
        {
            var MyFile = upl;

            if (MyFile != null && MyFile.ContentLength > 0)
            {
                ImageTbl NewImage = new ImageTbl();
                NewImage.ProductIDf = EventID;
                db.ImageTbls.Add(NewImage);
                db.SaveChanges();

                FileInfo fi = new FileInfo(MyFile.FileName);
                string ext = fi.Extension;

                var fileName = Path.GetFileName(MyFile.FileName);

                EventName = CommonFunctions.GetURLFriendlyString(EventName);

                fileName = "File-" + EventName + EventID + "-" + NewImage.ImageID + '-' + EventName + ext;
                var path = Path.Combine(Server.MapPath("~/Uploads"), fileName);
                MyFile.SaveAs(path);  // this is the code showing issue
            }


            db.SaveChanges();

        }
        catch (Exception e)
        {
          //logger.Error("UploadBanner", e);
            return "{\"status\":\"error\"}";
        }


        return "{\"status\":\"success\"}";
    }

HTML方面

@{ 
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8" />
    <title>Mini Ajax File Upload Form</title>
    <!-- Google web fonts -->
    <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />

    <!-- The main CSS file -->
    <link href="~/Scripts/AjaxUpload/assets/css/style.css" rel="stylesheet" />
</head>

<body>

    <form id="upload" method="post" action="/Upload/UploadFiles?EventID=1" enctype="multipart/form-data">
        <div id="drop">
            Drop Here

            <a>Browse</a>
            <input type="file" name="upl" multiple />
        </div>

        <ul>
            <!-- The file uploads will be shown here -->
        </ul>

    </form>



    <!-- JavaScript Includes -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="~/Scripts/AjaxUpload/assets/js/jquery.knob.js"></script>

    <!-- jQuery File Upload Dependencies -->
    <script src="~/Scripts/AjaxUpload/assets/js/jquery.ui.widget.js"></script>
    <script src="~/Scripts/AjaxUpload/assets/js/jquery.iframe-transport.js"></script>
    <script src="~/Scripts/AjaxUpload/assets/js/jquery.fileupload.js"></script>

    <!-- Our main JS file -->
    <script src="~/Scripts/AjaxUpload/assets/js/script.js"></script>


</body>
</html>

1 个答案:

答案 0 :(得分:0)

据我所知,这不是Ajax调用。这就是整个网页刷新的原因!

ASP.NET MVC中的ajax调用将是这样的:

<?php
if ( get_query_var('paged') ) {
    $paged = get_query_var('paged');
} elseif ( get_query_var('page') ) { // 'page' is used instead of 'paged' on Static Front Page
    $paged = get_query_var('page');
} else {
    $paged = 1;
}

$custom_query_args = array(
    'taxonomy_type' => 'post', 
    'posts_per_page' => get_option('posts_per_page'),
    'paged' => $paged,
    'post_status' => 'publish',
    'ignore_sticky_posts' => true,
    //'category_name' => 'custom-cat',
    'order' => 'DESC', // 'ASC'
    'orderby' => 'date' // modified | title | name | ID | rand
);
$custom_query = new WP_Query( $custom_query_args );

if ( $custom_query->have_posts() ) :
    while( $custom_query->have_posts() ) : $custom_query->the_post(); ?>


<div class="item col-sm-4">
<div class="well">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<span class="date"><?php echo get_the_date("j.n.Y"); ?></span>

<a href="<?php the_permalink(); ?>"><?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?></a>

<?php the_excerpt(); ?>
<div class="readmore-wrapper">
    <a class="readmore" href="<?php the_permalink(); ?>">Suite</a>
</div>
</div></div>

<?php endwhile; ?>

</div>
<?php if ($custom_query->max_num_pages > 1) : // custom pagination  ?>
        <?php
        $orig_query = $wp_query; // fix for pagination to work
        $wp_query = $custom_query;
        ?>
        <nav class="prev-next-posts">
                       <div class="next-posts-link">
                <?php echo get_previous_posts_link( '&lt; Page précédente' ); ?>
            </div>
            <div class="prev-posts-link">
                <?php echo get_next_posts_link( 'Page suivante &gt;', $custom_query->max_num_pages ); ?>
            </div>

        </nav>
        <?php
        $wp_query = $orig_query; // fix for pagination to work
        ?>
    <?php endif; ?>
<?php
    wp_reset_postdata(); // reset the query 
else:
    echo '<p>'.__('Sorry, no posts matched your criteria.').'</p>';
endif;
?>

要通过Ajax上传文件,请参阅以下帖子: https://stackoverflow.com/a/14674531/4180382