点击（拍照）上传照片

作者: 戒烟少年 | 来源:发表于2019-05-16 10:14 被阅读0次

点击（拍照）上传照片
2017-05-02
h5解决手机上竖拍照片旋转90度问题
从身份证正反面之辨，看我们对现实做出的妥协
2017-05-02
上传照片弹窗
小猿搜题页面流程图和原型图
小猿搜题原型图——手机扫描搜题功能
ios手机上传竖拍照片旋转90度问题
iOS拍照定制之AVCapturePhotoOutput

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图片上传测试</title>
<script src="./assets/js/jquery.min.js"></script>
</head>
<body>
<input type="hidden" name="backgroundPicture" id="backgroundPicture" value="" />
<img src="" class="showImg"  />
<input type="file" id="upload"/>
<script type="text/javascript">
 $(function(){
     $("#upload").change(function(){
           //创建FormData对象
           var data = new FormData();
           //为FormData对象添加数据
           $.each($(this)[0].files, function(i, file) {
                data.append('files', file);
          });
           var url = "http://47.103.52.86:8899/admin/uploadPictures";
           //var path = "http://47.103.52.86:8899/files/";
           $.ajax({
                url:url,
                type:'POST',
                data:data,
                cache: false,
                dataType:"json",
                contentType: false,    //不可缺
                processData: false,    //不可缺
                success:function(data){
                    console.log(data)
                    $("#backgroundPicture").val(data[0]);
                    $(".showImg").attr("src",data[1] + data[0]); //添加到回显的img标签上，同时该标签自动发送该图片的url
                    $('.showImg').css('width','107px')
                    $('.showImg').css('height','64px')
                 }
             });
        });
})
</script>
</body>
</html>