form上传文件2种方式

最新推荐文章于 2024-08-20 15:07:31 发布

蔚蓝的雨

最新推荐文章于 2024-08-20 15:07:31 发布

阅读量1.2k

点赞数

文章标签： typescript

本文链接：https://blog.csdn.net/qlxCSDN/article/details/130943229

版权

文章介绍了两种文件上传的方法，一种是传统的HTML表单提交，使用`multipart/form-data`编码类型来处理二进制数据，另一种是利用jQuery的AJAX无刷新上传，展示了一个包含进度条反馈和服务器响应处理的示例。

摘要由CSDN通过智能技术生成

form 上传文件的2种方式

示例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" onclick="gosubmit2()"/>
</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>