前端文件表单/ajax上传实例代码
生活随笔
收集整理的這篇文章主要介紹了
前端文件表单/ajax上传实例代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
表單上傳文件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試文件上傳</title> </head> <body> <form action="/attach/upload" enctype="multipart/form-data" method="post"><input type="file" name="content" /> <br><input type="submit" value="上傳" /> </form> </body> </html>ajax文件上傳
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測試ajax文件上傳</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/><style>.upload_image_input_trigger {position: relative;display: inline-block;margin-left: 10px;margin-right: 10px;overflow: hidden;}.upload_image_input {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}.box {width:600px;margin: 50px auto;}</style> </head> <body> <div class="box"><a href="javascript:;" style="margin-top:-4px;" class="btn btn-default upload_image_input_trigger"><span>上傳圖片</span><input class="upload_image_input" type="file" accept=".png, .jpg, .jpeg"></a> </div><script>$(function(){$(".upload_image_input").on('change',function(){var cur_obj = $(this);var file_obj = this.files[0];if(file_obj === undefined){layer.msg('沒有選擇文件');return;}if (file_obj.size > 2097152) {layer.msg("圖片大小不能超過2M");return;}var formData = new FormData();formData.append("type", "image");//其它參數formData.append("content", file_obj);//文件對象$.ajax({url: '/attach/upload',type: 'POST',dataType: "json",data: formData,cache: false,contentType: false,processData: false,beforeSend: function () {cur_obj.parent().find('span').html('上傳中');},success: function(result){console.log(result);cur_obj.parent().find('span').html('上傳圖片完成');alert("success");}});});}); </script> </body> </html>轉載于:https://www.cnblogs.com/zqsb/p/10985425.html
總結
以上是生活随笔為你收集整理的前端文件表单/ajax上传实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： zip：命令行下zip压缩/解压缩
- 下一篇： 前端面试每日 3+1（每日三问）