多个图片框上传图片

标签：text   off   显示   cti   hidden   上传   mod   pos   formdata   

html代码

• 
  
  
  
  
  1
  

  
  

  
  

  
  *商品类别：
  

  
  

  
  
  请选择商品
  @foreach($product_category as $product)
  {{$product->name}}
  @endforeach
  
  
  请选择商品
  
  

  
  

  
  

  
  -
  name="good_number[]" value="1" placeholder="" autocomplete="off">
  +
  

  
    个
  

  
  
  

  
  

  
  

  
  *故障描述：
  

  
  autocomplete="off" placeholder="请填写商品的型号" datatype="*" nullmsg="请输入商品型号">
  

  
  

  
  
  • 
    
    
    
    X
    

    
    
    
    
    
  
  
  • 
    
    
    
    X
    

    
    
    
    
    
  
  
  • 
    
    
    
    X
    

    
    
    
    
    
  
  
  • 
    
    
    
    X
    

    
    
    
    
    
  
  
  • 
    
    
    
    X
    

    
    
    
    
    
  
  

  
  

  
  

  
  继续添加图片
  

  
  

  请按照实际情况上传图片，最多可上传10张;支持JPG/JPEG/PNG格式,大小不超过5M。

  
  

  
  
  
  

//JS上传图片显示
$(function () {
    $(document).on("change", ".filepath", function () {
        var srcs = getObjectURL(this.files[0]);   //获取路径
        var _this = $(this);
        var dd = $(this).parents(‘.commodityList‘).index();
        console.log(dd);
        console.log(this.files[0]);
        var html = ‘‘;
        var formData = new FormData();
        formData.append("file", this.files[0]);
        $.ajax({
            url: "/task/fileUpload",
            type: "POST",
            data: formData,
            headers: {
                ‘X-CSRF-TOKEN‘: $(‘meta[name="csrf-token"]‘).attr(‘content‘)
            },
            /**
             *必须false才会自动加上正确的Content-Type
             */
            contentType: false,
            /**
             * 必须false才会避开jQuery对 formdata 的默认处理
             * XMLHttpRequest会对 formdata 进行正确的处理
             */
            processData: false,
            success: function (data) {
                console.log(data);
                html = ‘‘;
                _this.parents(‘.imgnum‘).append(html);
                $("#imgWait").html("上传成功");
            },
            error: function () {
                alert("上传失败！");
                $("#imgWait").hide();
            }
        });
        $(this).nextAll(".img1").hide();   //this指的是input
        $(this).nextAll(".img2").show();  //fireBUg查看第二次换图片不起做用
        $(this).nextAll(‘.close‘).show();   //this指的是input
        $(this).nextAll(".img2").attr("src", srcs);    //this指的是input
        $(".close").on("click", function () {
            $(this).hide();     //this指的是span
            $(this).nextAll(".img2").hide();
            $(this).nextAll(".img1").show();
        })
    })
});

多个图片框上传图片

标签：text   off   显示   cti   hidden   上传   mod   pos   formdata   

原文地址：http://www.cnblogs.com/chen1970s/p/7744069.html