路径选择jfilechoose 实现服务器文件保存到本地,通过FileAPI本地选取文件并上传示例（前端）...

一、示例简图

二、主要技术栈

bootstrap

ajax

FileAPI

三、主要代码

FileApI-Demo

accept="image/png,image/jpg,image/jpeg">选择图片

上传图片

$(function () {

var imgData = []

// 获取图片

$("#select-file").on('change', function (e) {

var files = this.files

for (let i = 0; item = files[i]; i++) {

var reader = new FileReader()

reader.onload = (function (item) {

return function (e) {

var imgId = new Date().getTime()

imgData.push({

id: imgId,

name: item.name,

url: e.target.result,

size: item.size

})

$("#image-list").append(

'

X

')

}

})(item)

reader.readAsDataURL(item) //以url的形式读出图片

}

})

//删除选择的图片

$("#image-list").on('click', '.remove', function () {

$(this).parent().remove()

var oId = parseInt($(this).prev(".selected-img").attr("id"))

imgData = imgData.filter(function (img) {

return img.id !== oId

})

})

// 上传图片

$(".upload").on('click', () => {

if (imgData.length > 0) {

$.ajax('/upload.php', {

method: 'POST',

data: JSON.stringify(imgData),

contentType: 'application/json; charset=utf-8',

dataType: 'json',

success: function () {

alert("Upload image success");

},

error: function () {

alert("Upload image error");

}

})

} else {

alert("please choose a image for upload")

}

})

})

注：关于FileAPI更多的内容，可以参考我的另外一篇文章---->HTML5中的文件读取---File API