当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js formData图片上传（单图上传、多图上传）后台java

js formData图片上传（单图上传、多图上传）后台java

2018年12月13日  | 移动技术网IT编程  | 我要评论

今日福彩,满清禁宫奇案下载,魅族m9主题

单图上传

<div class="imgup">
     <label>头像单图</label>
     <input type="file" name='photo' class="mui-input-clear" id='upimg' style="opacity: 0;" >
      <img src="images/up.png" alt="" id='imgcontent'>
</div>

js

$('#upimg').on('change',function(){                                                 //选中图片后展示在页面
    var filepath = $(this)[0].files[0].name //获取到input的value，里面是文件的路径
   //console.log(filepath) //1.png
   fileformat = filepath.split('.')[1].tolowercase()
   //console.log(fileformat) //png
   src = window.url.createobjecturl(this.files[0]) //转成可以在本地预览的格式
   //console.log(src) //blob:null/11ea5a2d-7270-4035-b5c4-4e50c5c061e7

  // 检查是否是图片
  if( !fileformat.match(/png|jpg|jpeg/) ) {
      alert('上传错误,文件格式必须为：png/jpg/jpeg')
     return
  }

$('#imgcontent').attr('src',src)

})

 

多图上传

<div class="imgup1">
    <label>详情页多图</label>
    <input type="file" class="mui-input-clear" id="upimg1" multiple style="opacity: 0;">
    <img src="images/up.png" alt="" id='imgcontent1'><br>
    <div id="previewimg">
           
    </div>
</div>

js

var fileall = []  //存放图片的容器

$('#upimg1').on('change', function(){
     var imgfiles = $(this)[0].files
     for (i=0;i<imgfiles.length;i++){
              filepath = imgfiles[i].name
              fileformat = filepath.split('.')[1].tolowercase()
              src = window.url.createobjecturl(imgfiles[i])
              if( !fileformat.match(/png|jpg|jpeg/) ) {
                    alert('上传错误,文件格式必须为：png/jpg/jpeg')
                    return
              }
             var preview = document.getelementbyid("previewimg")
             var img = document.createelement('img')
             img.width = 120
             img.src = src
             preview.prepend(img)

            fileall.push($("#upimg1")[0].files[0])
            console.log(fileall)

})

 

点击提交或者上传时

var formdata1 = new formdata();

$("#submit").click(function(){

    for(var i = 0;i<fileall.length;i++){
         formdata1.append("img",fileall[i]);
    }

   formdata1.append("photo", $("#upimg")[0].files[0]);

   $.ajax({
        url: compageurl+'/applyvote',
        type: 'post',
        async:true,
        xhrfields:{
            withcredentials:true
         },
        contenttype:false,
        processdata:false,     //这个很有必要，不然不行
        datatype:"json",
        mimetype:"multipart/form-data",
        data: formdata1,
        success: function(res){
                  console.log(res)
                 if(res.status==200){
                     alert("上传成功")
                 }

        },
        error: function(){
               alert('服务器发生错误！');
        }
    })

})

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网