zoukankan      html  css  js  c++  java
  • asp.net mvc3 上传图片


        在mvc3 中上传图片,可以借助 ajax upload 插件,实现无刷新上传,具体实现如下:

       

        首先在页面中引用ajaxupload.js

      

        然后js方法:

       

       

     

    var vAlertMsg = '图片格式不正确,请选择 jpg|jpeg|gif|png 格式的文件!';

    function createUploader() {
        var upload1 = new AjaxUpload('#btnUpfile', {
            action: '/Handler/uploadPic.ashx', //后台实现上传功能
            responseType: 'json',
            autoSubmit: true,
            onSubmit: function (file, ext) {
                if (!(ext && /^(jpg|jpeg|gif|png)$/ig.test(ext))) {
                    alert(vAlertMsg, '系统提示');
                    return false;
                }
                $('#uploading').html('<img src="http://images.cnblogs.com/ajax-loader.gif" />文件上传中,请稍后!');
            },
            onComplete: function (file, json) {
                var err = json['Msg'];
                var file1;
                if (err != null && err != '') {
                    alert(err);
                }
                else {
                    file1 = json['FilePath'];


                    $('input[id$="txtWorksImage'"]').val(file1);
                   
                    $('#uploading').html('<span>*</span>上传图片成功');                

                    $('input[id$="Pic"]').val(file1);

                }
            }
        });
    }

       在页面中初始化js方法

      

    $(function () {
            createUploader();})

     

       再在页面中加入如下html

      

     

     @Html.Hidden("txtWorksImage")
     @Html.TextBoxFor(model => model.Pic)
     <input type="button" style="54px; height:24px; border:0px; background-image:url(/images/img_36.gif);" id="btnUpfile" />
     @Html.ValidationMessageFor(model => model.Pic, "", new { @id = "uploading" })

     

       

       注意ID,要与js方法中的一致哦~

      

  • 相关阅读:
    Java并发(八):AbstractQueuedSynchronizer
    Java类实例化原理
    Flask【第五章】:做一个用户登录之后查看用户信息的小例子
    Flask【第四章】:Flask中的模板语言jinja2以及render_template的深度用法
    Flask【第三章】:Flask中的reques
    Flask【第二章】:Flask三剑客(HTTPResponse、render、redirect)和辅招(jsonify、send_file)
    Flask【第一章】:Flask介绍与安装
    vue之路由结合请求数据
    vue之动态路由和get传值
    vue之路由以及默认路由跳转
  • 原文地址:https://www.cnblogs.com/lpe110/p/2387122.html
Copyright © 2011-2022 走看看