ajax文件 上传

来源:互联网 发布:网络之重临巅峰txt下载 编辑:程序博客网 时间:2024/06/11 12:13
    <div class="edit">
        <form  id="uploadForm" enctype="multipart/form-data">
            <input class="title input" type="text" placeholder="请输入标题" id="bt" name="bt">
            <input type="file" value="AjaxUpload" style="margin-top: 10px;" id="file" name="file">
            <textarea class="desc input" name="ms" cols="30" rows="10" placeholder="请输入描述" id="ms"></textarea>
            <textarea class="content input" name="coninput" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
            
            <input type="button" value="保存并发送" class="a_button" style="margin: 10px auto;" id="upload">
        </form>
    </div>
</div>
<script src="./jquery-3.2.1.min.js"></script>
<script>

//即点即改换图片代码
$('#file').change(function () {
        var r= new FileReader();
        f=document.getElementById('file').files[0];


        r.readAsDataURL(f);
        r.onload=function (e) {
            document.getElementById('show').src=this.result;
        };

    })


//ajax文件上传

 $('#upload').click(function () {
    var formData = new FormData($('#uploadForm')[0]);
    $.ajax({
        url: './qf.php',
        type: 'POST',
        cache: false,
        data: formData,
        processData: false,

        contentType: false,


    }).done(function(res) {
      alert(res);
    })