h5 实现图片上传 案例

如何在h5 中实现图片上传 ？

（单图片上传）

• 先写一个按钮 ，通过点击按钮触发文件上传的onclick 事件

  <div class="btn" onclick="takePhone()">请点击进行拍照</div>
  <input type="file" name="file" id="upload" capture="camera" 
         onchange="uploadImg()" 
         accept="image/*" value="" hidden=""/>

• 注：设置 capture="camera" ，意为只可进行拍照，不可从相册选取图片上传
• 别的参数自行进行查阅

	// 拍照
   function takePhone() {
   
       $("#upload").click(); // 调用图片上传
   }
   //上传文件
   function uploadImg() {
   
       var fd = new FormData();
       var file = $("#upload").get(0).files[0];
       fd.append("file", file);
       $.ajax({
   
           url: "xxx/upload", // 填写你的url地址
           type: "post",
           data: fd,
           processData: false, // 因为data值是FormData对象，不需要对数据做处理
           contentType: false, // 告诉jQuery不要去设置Content-Type请求头
           cache: false, // 上传文件不需要缓存
           success: function (res) {
   
             console.log(res); // 图片上传返回的结果          
           }
       }