两种方式上传文件

示例1:

上载图片/文件的形式

<form enctype="multipart/form-data" method="post">
<input type="file" name="uploadfile"/>
</form>

multipart / form-data用于上传二进制数据

表单中的输入值以二进制格式传递上传文件 form上传文件 form，因此了解使用此格式后的后台请求将不会获取数据很重要.

enctype属性用于设置提交数据的格式，并指定浏览器在将数据发送回服务器时使用的编码类型.

enctype值:

application / x-www-form-urlencoded: 表单数据被编码为名称/值对. 这是标准（默认）编码格式.

multipart / form-data: 表单数据被编码为消息，并且页面上的每个控件都对应于消息的一部分.

文本/纯文本: 表单数据以纯文本编码，没有任何控件或格式字符.

示例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>

jquery-form.js csdn下载

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-288535-1.html