js上传文件到后端

最新推荐文章于 2024-08-24 08:28:00 发布

菜鸟上路_lbz

最新推荐文章于 2024-08-24 08:28:00 发布

阅读量4.9k

点赞数 2

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_44198436/article/details/107547254

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

html：

<!DOCTYPE html>
<html>
<head>
  <title>upload_test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
	<input type="file" id="files"  multiple="multiple">
	<button onclick="upload()">提交</button>
	<div id='notice'></div>
</body>
</html>

js：

<script>
 function upload()
{
    var up_file = $('#files').files[0];//找到id为file的组件，当然这里是input组件
    var formData = new FormData();//新建一个formdata用于存储数据
    formData.append("up_file",up_file);//将选择的文件添加到formdata中
    $("#test").html(target)
    $.ajax
        ({
            url:'http://127.0.0.1:5000/upload',
            dataType:'json',
            type:'POST',
            async: true,
            data: formData,
            processData : false, // 使数据不做处理
            contentType : false, // 不要设置Content-Type请求头
            success: function(data)
            {
                if(data['data']==200)
                {
                    target='上传成功'
                    $("#notice").html(target)
                }
            }
        });
}
</script>

<input id="input-file" type="file" multiple="multiple" accept="file/*" capture="camera">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<div id='inputFunc'>
	
</div>
<script type="text/javascript">
	$("#input-file").on('change', function () { //上传图片控件改变时触发
    var items = $(this)[0].files; //获得文件的本身
    console.log(items);
	var fileName = items[0].name; // 获得文件名
	var fileSize = items[0].size; // 获得文件大小 ，单位B(字节)
	var fileType = items[0].type;
	var size = parseInt(fileSize/1024/1024);
	                         
	var html = "<p>文件名称："+fileName+"</p><p>文件大小："+size+" MB</p><p>文件类型："+fileType+"</p>";                        
	 $('#inputFunc').html(html);
});

</script>