JS-上传文件

一、input使用传文件，调用手机摄像图，图库。

       

<!--accept:打开系统目录--><!--capture:camera-相机，camcorder-摄像机，microphone-录音--><input type="file" accept="image/*" capture="camera"/><input type="file" accept="video/*" capture="camcorder"/><input type="file" accept="audio/*" capture="microphone"/>

<input type="file" name="file" id="pic"/>

二、用input完成上传，效果图如

       

        选择文件后，提交后在提交按钮后面出现url和对应图片缩略图,如下图：。

     

三、传输格式采用form-data形式。

html代码  

<form id="upload" enctype="multipart/form-data" method="post">    <input type="file" name="file" id="pic"/>    <input type="button" value="提交" onclick="uploadPic();"/>    <span class="showUrl"></span>    <img src="" class="showPic" alt=""></form>

js部分

function uploadPic() {        var form = document.getElementById('upload'),                formData = new FormData(form);        $.ajax({            url:"上传的url——/file/upload",            type:"post",            data:formData,            processData:false,            contentType:false,            success:function(res){                if(res){                    alert("上传成功！");                }                console.log(res);                $("#pic").val("");                $(".showUrl").html(res);                $(".showPic").attr("src",res);            },            error:function(err){                alert("网络连接失败,稍后重试",err);            }        })    }