js实现原生上传图片以及显示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><center><form action=""><input type="file" id="file" onChange="preview(this)"/><br><img src="" id="previewimg" width="100px" height="150px"/><br></center></form></body></html><script>//上传图片function preview(obj){var file = document.getElementById('file').value;//获取文件var index = file.lastIndexOf('.'); //获取最后一位小数点var extension = file.substr(index + 1);var arr = ['jpeg','png','jpg','gif'];if (isInArray(arr,extension)) {var img = document.getElementById("previewimg");img.src = window.URL.createObjectURL(obj.files[0]);var file = obj.files[0];UpladFile(file);} else {alert('请选择正确的图片格式');return false;}}//上传文件方法function UpladFile(fileObj) {var form = new FormData(); // FormData 对象form.append("file", fileObj); // 文件对象form.append('_token','{{ csrf_token() }}');xhr = new XMLHttpRequest(); // XMLHttpRequest 对象xhr.open("post", "http://127.0.0.1/b/1.php", true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。xhr.send(form); //开始上传，发送form数据xhr.onreadystatechange = function () {var data = xhr.responseText;console.log(data);}}/*** 使用循环的方式判断一个元素是否存在于一个数组中* @param {Object} arr 数组* @param {Object} value 元素值*/function isInArray(arr,value){for(var i = 0; i < arr.length; i++){if(value === arr[i]){return true;}}return false;}</script>
如果觉得《js实现原生上传图片以及显示》对你有帮助，请点赞、收藏，并留下你的观点哦！
