上传文件原理是利用Input的type=“file”

html

<tr>
<th>下单图旺铺地址 <button type="button" class="btn btn-success btn-xs | load">添加</button>
<td><input type="text" class="ljinput form-control | commodity_img_link" required></td>
<tr>

js(这里使用了jq写法)

// 获取当前域名
var domain = window.location.host;
//输入框 style="display:none" 使其不会显示在页面中也不占用位置，但是确实存在的
// 添加隐藏输入框 after 在button后面添加input框 与button是兄弟关系 下面获取input框的时候就用到siblings
$('.load').after('<input type="file" class="load_img" name="file" style="display:none">');
 // 点击按钮触发上传输入框绑定的方法
 $('.load').on('click',function(){
 // $(this)作用是定位到当前的input输入框，在有多个class相同的input可以区分是哪个被触发了
 //trigger('click')是为了保证在点击按钮的同时能触发点击input，弹出选择文件
     $(this).siblings('.load_img').trigger('click')
 })
 // 上传输入框绑定的方法 选择好文件后调用上传接口
 $('.load_img').on('change',uploadImg)
 // 上传图片
 function uploadImg(){
             let _this = $(this)
             var myform = new FormData();
             myform.append('upfile',this.files[0]);// this.files[0] 上传的文件 upfile，保存文件的参数
             $.ajax({
                 url: "http://"+ domain +"/page/oss_upload_image",//上传地址
                 type: "POST",//方法
                 data: myform,
                 contentType: false,
                 processData: false,
                 success: function (data) {
                     let url = JSON.parse(data).url
                     var val={type:'url',urls:url}
                     // 将返回的文件路径赋值给 ljinput 输入框
                     _this.parent().siblings().children('.ljinput').val(url)
                     console.log(_this.parent().siblings().children('.ljinput'))
                     console.log(_this.parent().siblings().children('.ljinput').val(url))
                 },
                 error:function(data){
                     console.log(data)
                 }
             });
 }

值得一提的是，在做批量处理的时候，$(this)的指向很重要，以及在给输入框赋值时需要找到那个输入框。还有动态添加的元素绑定的事件无效的原因是元素绑定事件方法在元素被创建之前先执行了，导致元素创建后事实上并没有绑到事件，需借助on方法。
另一种情况是button按钮也是通过动态创建出来的时候，就需要找到一开始就存在的父级元素，再绑定on方法
比如：
html

<div class="btn"> 点击添加按钮 </div>

js

$(".btn").off("click").on("click",add_fn);
function add_fn(){
 var html = `<button type="button" class="btn btn-success btn-xs | load">添加</button><input type="file" class="load_img" name="file" style="display:none">`
 $(".btn").append(html)//将html作为子元素放在div(.btn)里面 
}
//不用怕创建的元素在很深的地方 会自动找到父级元素下符合class名 id名 或者标签名的元素 
$('.btn').off("click").on('click','.load',function(){
    $(this).siblings('.load_img').trigger('click')
})
$('.btn').on('change','.load_img',uploadImg)
//uploadImg 方法不变