jquery上传图片

<div>
    <div class="imgBox">
    </div>
    <div>
          <!-- 上传按钮 -->
       <div class="cut-cert-btn">
	       <div class="cut-cert-btn-content">上传图片</div>
	       <input type="file" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp,video/*" id="cert_file" />
	   </div>
     </div>
</div>

第一种

var file = document.getElementById('cert_file');
// 图片预览元素
var image = document.querySelector("cert_view");
// 事件

file.addEventListener('change', (e) => {
  const file = e.target.files[0]; // 获取文件对象
  const formData = new FormData(); // 创建FormData对象
  formData.append('file', file); // 将文件添加到FormData对象中，字段名为'video'
 
  // 使用fetch上传文件
  fetch("{:url('/api/common/upload')}", { // 替换为您的上传API端点
    method: 'POST',
    body: formData,
  })
    .then(response => response.json()) // 如果API返回JSON，解析它
    .then(data=> {
        console.log(data)
        let img = $(`<div class="imgBoxItem">
                			<img class="imgBoxItem_img" src="${data.data.url}" alt="">
                			<img class="delateIcon" src="__CDN__/devination/img/delateImg.png" alt="" />
                		</div>`)
            $('.imgBox').append(img)
    }) // 处理返回的数据
    .catch(error => console.error('Error:', error)); // 处理错误
});

第二种

file.onchange = function() {
  // 上传的文件 
  var pic1 = this.files[0];
  console.log(pic1)
//   /api/common/upload
    var formData = new FormData();
    // 服务端要求参数是 pic1 
    formData.append('file',pic1);
    // console.log(formData)
    // var reader = new FileReader();
    // reader.readAsDataURL(formData);
    $.ajax({
        url:"{:url('/api/common/upload')}",
        type:'post',
        data:formData,
        cache: false, //上传文件不需要缓存
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        success:function(data){
        	console.log(data);
            // 设置图片预览功能
            // $('.head-img').attr('src',data.picAddr);
            // data.data.url
            
		
            let img = $(`<div class="imgBoxItem">
                			<img class="imgBoxItem_img" src="${data.data.url}" alt="">
                			<img class="delateIcon" src="__CDN__/devination/img/delateImg.png" alt="" />
                		</div>`)
            $('.imgBox').append(img)
        }
    })

}