兼容ie8的ajax文件上传

最新推荐文章于 2021-12-21 10:42:58 发布

molaifeng

最新推荐文章于 2021-12-21 10:42:58 发布

阅读量3.8k

点赞数

分类专栏： Javascript 文章标签： ajax ie 8

本文链接：https://blog.csdn.net/molaifeng/article/details/74332147

版权

Javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

talk is cheap,show you the code

html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>demo</title>
 </head>
 <script src="jquery.js"></script>
 <script>
 $(function () {
    $('#demo').change(function () {
        ajaxUpload({
            id:'demo',
            frameName:'frameName',
            url:'upload.php',
            format:['jpg','png','gif','bmp'],
            callBack:function (data) {
                console.log(data);
            }
        })
    });
 })

/*
    参数说明:
    opt.id : 页面里file控件的ID;
    opt.frameName : iframe的name值;
    opt.url : 文件要提交到的地址;
    opt.format : 文件格式，以数组的形式传递，如['jpg','png','gif','bmp'];
    opt.callBack : 上传成功后回调;
*/
function ajaxUpload(opt)
{

    var iName=opt.frameName; // 太长了，变短点
    var iframe,form,file,fileParent;
    // 创建iframe和form表单
    iframe = $('<iframe name="'+iName+'" />');
    form = $('<form method="post" style="display:n1one;" target="'+iName+'" action="'+opt.url+'"  name="form_'+iName+'" enctype="multipart/form-data" />');
    file = $('#'+opt.id); // 通过id获取flie控件
    fileParent = file.parent(); // 存父级
    file.appendTo(form);
    // 插入body
    $(document.body).append(iframe).append(form);

    // 取得所选文件的扩展名
    var fileFormat=/\.[a-zA-Z]+$/.exec(file.val())[0].substring(1);
    if(opt.format.join('-').indexOf(fileFormat)!=-1){
        form.submit();// 格式通过验证后提交表单;
    }else{
        file.appendTo(fileParent); // 将file控件放回到页面
        iframe.remove();
        form.remove();
        alert('文件格式错误，请重新选择！');
    };

    // 文件提交完后
    iframe.load(function(){
        var data = $(this).contents().find('body').html();
        file.appendTo(fileParent);
        iframe.remove();
        form.remove();
        opt.callBack(data);
    })
}
 </script>
 <body>
  <div class="container"><input type="file" id="demo" name="demo"></div>
 </body>
</html>

php

<?php

move_uploaded_file($_FILES['demo']['tmp_name'], iconv('utf-8', 'GBK', $_FILES['demo']['name']));

die(json_encode(['status' => 1, 'msg' => 'success', 'url' => $_FILES['demo']['name']]));