英溯IT论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 737|回复: 0

form上传文件的两种方式

[复制链接]

94

主题

101

帖子

510

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
510
发表于 2021-3-29 09:53:49 | 显示全部楼层 |阅读模式
示例1:

表单里有图片/文件的上传

<form enctype="multipart/form-data" method="post">

<input type="file" name="uploadfile"/>

</form>

multipart/form-data 是上传二进制数据
form里面的input的值以2进制的方式传过去,所以这里要明白,使用这种格式以后,后台request就获取不到数据了。

enctype属性是设置提交数据的格式,指定将数据回发到服务器时浏览器使用的编码类型。

enctype值:

application/x-www-form-urlencoded:窗体数据被编码为名称/值对。这是标准(默认)的编码格式。
multipart/form-data:窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。

text/plain:窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符

示例2:jquery ajax无刷新上传图片

<form id='myupload' action='XXXXXXXXXXXX' method='post' enctype='multipart/form-data'>
<div class="demo">
<div class="btn">
    <span>添加附件</span>
    <input id="fileupload" type="file" name="file1">
</div>
<div class="progress">
    <span class="bar"></span><span class="percent">0%</span>
</div>
<!-- 显示已上传的文件名 -->
<div class="files"></div>
<!-- 显示已上传的图片-->
<div class="showimg"></div>
</div>
<input type="submit"/>
</form>
<script type="text/javascript" src="jquery-form.js"></script>
<script type="text/javascript">
    var bar = $('.bar');//进度条
    var percent = $('.percent');//获取上传百分比
    var showimg = $('.showimg');//显示图片的div
    var progress = $('.progress');//显示进度的div
    var files = $('.files');//文件上传控件的input元素
    var btn = $('.btn span'); //按钮文本
    function gosubmit2(){
        $("#myupload").ajaxSubmit({
            dataType :'json',//返回数据类型
            beforeSend:function(){
                showimg.empty();
                progress.show();
                var percentVal = '0%';
                bar.width(percentVal);
                percent.html(percentVal);
                btn.html('上传中..');
            },
            //更新进度条事件处理代码
            uploadProgress:function(event,position,total,percentComplete){
                var percentVal = percentComplete + '%';
                bar.width(percentVal);
                percent.html(percentVal);
            },
            success:function(data){//图片上传成功时
                //获取服务器端返回的文件数据
                alert(data.name+","+data.pic+","+data.size);               
            },
            error:function(xhr){
                btn.html(上传失败);
                bar.width('0');
                files.html(xhr.responseText);
            }
        });
    }
</script>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|英溯IT论坛 ( 沪ICP备13022730号-6 )

GMT+8, 2024-4-19 16:26 , Processed in 0.122725 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表