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>