js--上传图片

来源：互联网发布：淘宝怎么做排名靠前编辑：程序博客网时间：2024/05/17 00:14

<button type="button">上传图片</button>
<input type="file" id="rel_photoimg">
<div id="rel_imgbox"></div>

$('#rel_photoimg').bind('change',function(){
            var files = $(this).context.files;
            //console.log(files[0]);
            var sHtml = '';
            if(window.FileReader) {
              var type = files[0].type;
              if(type=='image/jpeg' || type=='image/gif' || type=='image/jpg' || type=='image/png'){
                var src = window.URL.createObjectURL(files[0]);
                sHtml+='<img src="'+src+'" class="visa_img" />';
              }
              else{
                alert('请选择图片！');
              }
              $('#rel_imgbox').html(sHtml);
            }
    });

上传多张图片
var isAllowToSubmit = true;
$('#rel_bigimg').bind('change',function(){
var files = $(this).context.files;
var sHtml = '';
if(window.FileReader) {
    for(var i = 0, max = files.length; i<max; i++){
      var type = files[i].type;
      if(type=='image/jpeg' || type=='image/gif' || type=='image/jpg' || type=='image/png'){
        var src = window.URL.createObjectURL(files[i]);
        sHtml+='<div style="position:relative; float:left;"><img src="'+src+'" class="rel_img" /><img src="images/change.png" class="change_img"><input type="file" class="change_input"><img src="images/closeimg2.png" class="rel_delimg"></div>';
      }
      else{
        alert('请选择图片！');
        isAllowToSubmit = false;
        break;
      }
    }
    if(!isAllowToSubmit){
      return false;
    }
    $('#rel_bigbox').append(sHtml);

}

});

//更换图片
$("body").on("change",".change_input",function(){

            if(window.FileReader) {
              var files = $(this).context.files;
              var sHtml = '';
              var type = files[0].type;
              if(type=='image/jpeg' || type=='image/gif' || type=='image/jpg' || type=='image/png'){
                var src = window.URL.createObjectURL(files[0]);
                sHtml+='<img src="'+src+'" class="rel_img" /><img src="images/change.png" class="change_img"><input type="file" class="change_input"><img src="images/closeimg2.png" class="rel_delimg"></div>';
              }
              else{
                alert('请选择图片！');
              }
              $(this).parent().html(sHtml);
            }
});

//删除图片
$("body").on("click",".rel_delimg",function(){
      $(this).siblings("img").remove();
      $(this).remove();
    });

var isAllowToSubmit = true;
$('#rel_bigimg').bind('change',function(){
var files = $(this).context.files;
var sHtml = '';
if(window.FileReader) {
    for(var i = 0, max = files.length; i<max; i++){
      var type = files[i].type;
      if(type=='image/jpeg' || type=='image/gif' || type=='image/jpg' || type=='image/png'){
        var src = window.URL.createObjectURL(files[i]);
        sHtml+='<div class="img_list" id="img_list1"><img src="'+src+'" class="rel_img" /></div>';
        if($("#img_list1").size() >= 5){
          alert("最多上传5张图片！");
          $(".img_list").last().remove();
        }
      }
      else{
        alert('请选择图片！');
        isAllowToSubmit = false;
        break;
      }
    }
    if(!isAllowToSubmit){
      return false;
    }
    $('#rel_bigbox').append(sHtml);
}
});

0 0