js selects pictures, previews, and uploads functions. Using the ui framework layui and jquery, the pseudo code is as follows:
<form class="layui-form layui-form-pane layui-col-md6 layui-col-md-offset3">
<div class="layui-form-item">
<label class="layui-form-label">logo</label>
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-normal" onclick="openImg()">打开图片</button>
<input type="file" id="sub_file" name="imageUpload" accept="image/*"/>
</div>
<div class="layui-word-aux" id="subtitleSelectImgName"></div>
</div>
<div class="layui-form-item">
<div id="preview"></div>
</div>
<div class="layui-form-item">
<div class="layui-form-mid layui-word-aux">温馨提示:支持上传.png.jpg图片格式,推荐尺寸230*90像素,请将每张图片的大小控制在100Kb以内。</div>
</div>
<div class="layui-form-item">
<div id="tips"></div>
</div>
<div class="layui-form-item" style="text-align: right;">
<button type="button" class="layui-btn layui-btn-normal" id="calculate" onclick="inputUpload()">上传</button>
</div>
</form>
function openImg() {
$("#sub_file").click();
}
function preview2(file) {
var reader = new FileReader()
reader.onload = function (e) {
var $img = $('<img>').attr("src", e.target.result);
$('#preview').empty().append($img);
}
reader.readAsDataURL(file);
}
let form_data;
$(function () {
$('[type=file]').change(function (e) {
var file_data = e.target.files[0];
if (file_data !== undefined) {
$("#subtitleSelectImgName").text(file_data.name);
preview2(file_data);
form_data = new FormData();
form_data.append("img", file_data);
} else {
$("#subtitleSelectImgName").html("");
$('#preview').empty();
}
$("#tips").html("");
})
})
//上传
function inputUpload() {
if ($("#subtitleSelectImgName").text() == "") {
$("#tips").html("请选择图片").css("color", "#FF4351");
return;
}
let load = layer.load(1, {shade: [0.1, '#fff']});
setTimeout(function () {
//上传到服务器
$.ajax({
type: "POST", // 上传文件要用POST
url: "http://" + FileIP + "/uploadlogo",
dataType: "json",
crossDomain: true, // 如果用到跨域,需要后台开启CORS
processData: false, // 注意:不要 process data
contentType: false, // 注意:不设置 contentType
data: form_data,
async: false,
success: function (msg) {
console.log("chenggong " + msg);
},
error: function (data) {
$("#tips").html("失败").css("color", "#FF4351");
console.log("shibai " + data);
layer.close(load);
}
});
}, 100);
}
Choose a picture effect: