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); // 图片上传返回的结果  } }); } 

多图片上传实现效果如下：

• html 基本布局

<ul class="file-list "></ul> <div class="upload"> <img src="./images/upload.png" class="add choose" id="choose"/> </div> <input type="file" name="" id="choose-file" multiple="multiple" style="opacity: 0"/> 

• 如何实现

$(function(){ 
    $('.choose').click(function () { 
    $('#choose-file').click(); }) //---------图片上传-------------// //声明变量 var $button = $('#upload'),//选择文件按钮 $file = $("#choose-file"),//回显的列表 $list = $('.file-list'),//选择要上传的所有文件 fileList = []; //当前选择上传的文件 var curFile; // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它， // 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src. $file.on('change', function (e) { 
    $("#loading").show(); //上传过图片后再次上传时限值数量 var numold = $('li').length; if (numold >= 6) { 
    alert('最多上传6张图片'); return; } //限制单次批量上传的数量 var num = e.target.files.length; var numall = numold + num; if (num > 1) { 
    alert('最多上传1张图片'); return; } else if (numall > 10) { 
    alert('最多上传10张图片'); return; } //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息; curFile = this.files; curFile = $file.get(0).files; var file = $file.get(0).files[0]; var filename = file.name; // 将文件名赋值 //将FileList对象变成数组 fileList = fileList.concat(Array.from(curFile)); // 图片上传 var formData = new FormData(); formData.append("file", file); upload(formData, filename); // 自己的图片上传方法，由于最后会用到文件名，将其传递 for (var i = 0, len = curFile.length; i < len; i++) { 
    reviewFile(curFile[i]) ; // 图片回显 } $('.file-list').fadeIn(2500); }) //点击删除按钮事件： $(".file-list").on('click', '.file-del', function () { 
    let $parent = $(this).parent(); console.log($parent); let index = $parent.index(); fileList.splice(index, 1); // 删除附件 deleteFj(uploadFileFlag[index]); uploadFileFlag.splice(index, 1); $parent.fadeOut(850, function () { 
    $parent.remove() }); var filess = document.getElementById('choose-file'); filess.value = ''; }); ) 

图片在页面回显的方法

 function reviewFile(file) { 
    //实例化fileReader, var fd = new FileReader(); //获取当前选择文件的类型 var fileType = file.type; //调它的readAsDataURL并把原生File对象传给它， fd.readAsDataURL(file);//base64 //监听它的onload事件，load完读取的结果就在它的result属性里了 fd.onload = function () { 
    if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) { 
    $list.append('<li class="file-item"><img src="' + this.result + '" alt="" height="70"><span class="file-del"><i class="iconfont ">&#xe636;</i></span></li>').children(':last').hide().fadeIn(2500); } else { 
    $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del"><i class="iconfont ">&#xe636;</i></span></li>') } } } 

图片上传方法

function upload(fd, filename) { 
    $.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); } }); }