项目中用到的几个文件上传的例子,记录下,免得以后重复查找。

1、html5文件上传

以前上传文件需要提交Form表单。
HTML5方式上传文件,可以通过使用FormData类模拟Form表单提交,从而实现无刷新上传文件。

假设有一个文件选择框

<input >

可以在html中另外写一个dom来触发文件选择,或者直接使用文件选择也可以(丑一点)

  
<style>
    .upload_img {
        width: 80px;
        height: 80px;
        background-color: #fff;
        color: green;
        border: 1px solid green;
        border-radius: 5px;
        text-align: center;
        line-height: 80px;
        font-size: 40px;
        background-position: center;
        background-size: contain;
        cursor: pointer;
    }
</style>

<div class="form-group cell_upload">
                    <label class="col-sm-4 control-label no-padding-right" for="pname"><span class="lbl-warning">*</span> 转让文件 </label>
                    <div class="col-sm-4">
                        <div class="upload_img" style="background-image: url(&quot;&quot;);">+</div>   
                    </div>
                    <div class="col-sm-4">
                        <div class="upload_ready"></div>
                    </div>
                </div>

$(function () {
        $('.cell_upload .upload_img').click(function () {
            $('#chooseImage').click();//激活图片上传
        });      
    })
View Code

相关文章: