<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<meta http-equiv="X-UA-Compatible" content="IE=edge" /> ???????<title>Page Title</title> ???????<meta name="viewport" content="width=device-width, initial-scale=1" /> ???????<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> ???</head> ???<body> ???????<form action="" method=""> ???????????<label> ???????????????<input type="file" onchange="upfile(this, ‘#form01234‘);PreviewImage(this, ‘file0123‘);" /> ???????????????<div id="file0123"></div> ???????????????<input type="hidden" name="ico" id="form01234" /> ???????????</label> ???????</form> ???????<script> ???????????const url = "index.php"; ?//处理图片的接口 ???????????//选中图片预览 ???????????function PreviewImage(imgFile, id) { ???????????????if (imgFile.value != undefined) { ???????????????????var ext = imgFile.value.substring(imgFile.value.lastIndexOf(".")).toLowerCase(); ???????????????????if (!ext.match(/(?:jpg|jpeg|gif|png|bmp)$/)) { ???????????????????????imgFile.focus(); ???????????????????????return; ???????????????????} ???????????????????document.getElementById(id).innerHTML = ???????????????????????‘<img width="100%" src="‘ + window.URL.createObjectURL(imgFile.files[0]) + ‘" />‘; ???????????????} ???????????} ???????????function upfile(file, form) { ???????????????var formData = new FormData(); ???????????????formData.append("file", $(file)[0].files[0]); ???????????????$.ajax({ ???????????????????url, ???????????????????type: "POST", ???????????????????data: formData, ???????????????????processData: false, // 告诉jQuery不要去处理发送的数据 ???????????????????contentType: false, ???????????????????AccessControlAllowOrigin: "*", // 告诉jQuery不要去设置Content-Type请求头 ???????????????????beforeSend: function() { ???????????????????????console.log("正在进行，请稍候"); ???????????????????}, ???????????????????success: function(data) { ???????????????????????var json = JSON.parse(data); ???????????????????????$(form).val(json["url"]); ???????????????????}, ???????????????????error: function(data) { ???????????????????????console.log("上传失败"); ???????????????????} ???????????????}); ???????????} ???????</script> ???</body></html>ajax上传图片
原文地址：https://www.cnblogs.com/yg-home/p/10321522.html