• 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>、

    后台代码 

  • 相关阅读:
    usb驱动开发6之端点描述符
    usb驱动开发5之总线设备与接口
    usb驱动开发4之总线设备驱动模型
    usb驱动开发3之先看core
    usb驱动开发2之代码地图
    usb驱动开发1之学习准备
    javascript限制上传文件大小
    google Chrome打开多个网站时等待可用的套接字,怎么加大连接数量提升速度
    sql将一张表的字段赋值给另一张表
    百度搜索网址参数的含义
  • 原文地址:https://www.cnblogs.com/huguole/p/7374845.html
Copyright © 2020-2023  润新知