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

后台代码

时间: 2024-08-10 11:20:21

mvc上传图片预览,支持多图上传的相关文章

基于HTML5的可预览多图片Ajax上传

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中之一就是支

H5图片预览、压缩、上传

目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!-- html部分 --> <ul id="preview" class="clear"> <li class="fl"> <img src="/images/audition/icon_upload.pn

图片预览 base64 element 图片上传 预览图

https://www.jianshu.com/p/bee8c393c422 感谢 使用了element ui,愿望是   选择图片文件之后,不立即上传,先显示预览图,点击上传按钮之后再上传,element版本是2.13 用到了 URL.createObjectURL(file.raw) html <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/&

HTML5可预览多图片ajax上传(使用formData传递数据)

在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是ajax多图片上传前预览效果. 1. formData的基本的用法:首先创建一个 空对象实例 代码如下:var formData = new FormData(); 1-1 获取值通过get(key)/getAll(key)来获取对应的value:比如: formData.get("name"); // 获取key为name的第一个值. formData.g

html选择图片后预览,保存并上传

html代码: <input type="file" id="file" style="display:none;"> <img src="" width="200px" height="200px" id="img-change"> <button id="btn">保存图片</button> js

vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决:

//预览<div class="htmlViewBox"> <p v-html="activity_html_defaultMsg" v-show="htmlDefaultMsg"></p> <p v-show="defaultMsg=='' && htmlDefaultMsg==''">请在富文本编辑器内容</p></div>//编辑器&

Java带图片预览功能的图片上传兼容火狐ie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

js实现图片预览、压缩、上传

先看几个对象:Blob.ArrayBuffer.File.fileReader.formData 详细解释请参考:https://www.cnblogs.com/youhong/p/10875190.html 文件上传必用表单<form></form>: 1.获取表单信息2.转为base643.压缩base64通过canvas4.把base64转为文件对象5.AJAX提交信息 https://blog.csdn.net/Clara_G/article/details/8793685

jquery实现上传图片预览(需要浏览器支持html5)

jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m