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

    后台代码 

  • 相关阅读:
    windows下前端开发工具遇到的问题总结(yeoman bower grunt)
    gurnt js css 压缩合并
    PyCharm中的Console调整字体大小
    PyCharm中的Console自动换行
    requests模块demo
    http状态码
    查找入职员工时间排名倒数第三的员工所有信息
    查找最晚入职员工的所有信息
    xrange与range之间的区别
    给出每个员工每年薪水涨幅超过5000的员工编号emp_no、薪水变更开始日期from_date以及薪水涨幅值salary_growth,并按照salary_growth逆序排列。
  • 原文地址:https://www.cnblogs.com/huguole/p/7374845.html
Copyright © 2011-2022 走看看