文件上传的两种方式

okgoes 2023-05-09 13:07:15
Categories： Tags：

form上传文件2种方式

2015-07-11 15:05 by ddxueyu, 6482 阅读, 1 评论, 收藏, 编辑

示例1：

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

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无刷新上传图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<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下载

http://malsup.github.io/jquery.form.js

http://plugins.jquery.com/form/3.45.0/

Git 的安装与权限的控制 (使用Gitolite)
JavaScript操作Cookie