zoukankan      html  css  js  c++  java
  • mvc上传图片预览,支持多图上传

    @using (Html.BeginForm("Index_load", "Index_", new { }, FormMethod.Post, new { @id = "form0", @class = "form-horizontal", @enctype = "multipart/form-data" }))
    {
         <div>
              <input type="file" name="file0" id="file0" multiple="multiple" />
              <br><br><img src="" id="img_file0" width="120" class="hide">
              <br /><br />

         </div>
         <div>
              <input type="file" name="file1" id="file1" multiple="multiple" />
              <br><br><img src="" id="img_file1" width="120" class="hide">
              <br /><br />

         </div>
         <div>
              <input type="file" name="file2" id="file2" multiple="multiple" />
              <br><br><img src="" id="img_file2" width="120" class="hide">
              <br /><br />
         </div>
         <div>
              <input type="file" name="file3" id="file3" multiple="multiple" />
              <br><br><img src="" id="img_file3" width="120" class="hide">
          </div>
         <input type="submit" value="提交" />
    }

    <script>
          $(function () {
                $("#form0 input[type='file']").each(function () {
                $(this).change(function () {
                var objUrl = getObjectURL(this.files[0]);
                var img_id = "img_" + $(this).attr("id");
                console.log("img_id = " + img_id);
                if (objUrl) {
                      $("#" + img_id).attr("src", objUrl);
                      $("#" + img_id).removeClass("hide");
                }
          })
    })
    })
    function getObjectURL(file)
    {
          var url = null ;
          if (window.createObjectURL!=undefined)
          { // basic
                url = window.createObjectURL(file) ;
          }
          else if (window.URL!=undefined)
          {
                // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
          }
          else if (window.webkitURL!=undefined) {
                // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
          }
          return url ;
    }
    </script>、

    后台代码 

  • 相关阅读:
    Logback日志格式配置相关记录
    前后端分离验证码之cookie+redis方案
    聊一聊Swagger ui登录功能实现方案
    nginx-thinkphp5
    jmeter常用的性能测试监听器
    jvm内存
    TCP连接状态详解
    原生Javascript实现图片轮播效果
    适用于CSS2的各种运动的javascript运动框架
    JS中for循环里面的闭包问题的原因及解决办法
  • 原文地址:https://www.cnblogs.com/huguole/p/7374845.html
Copyright © 2011-2022 走看看