jQuery uploadify上传插件修改为ajax上传

网极科技5个月前代码笔记72

近期客户找到我们升级他们的老古董系统,这个系统创建于十几年前,使用了大量过时老旧的组件,需要更新替换,其中就包括了让很多程序员头疼的Flash组件。
本篇文章记录下如何将jQuery uploadify上传插件修改为ajax上传。
jQuery uploadify插件基于 Flash,这会导致它在不支持 Flash 的浏览器(例如较新版本的 Chrome 浏览器)上无法正常工作。

如果你希望上传功能在所有现代浏览器上均能正常使用,我建议你使用 HTML5 提供的文件 API 进行文件上传,而不是依赖 uploadify 插件。

这里给出一个如何使用 jQuery Ajax 与 HTML5 进行文件上传的基础例子:

<input type="file" id="fileInput"/>
<button type="button" id="uploadButton">上传文件</button>

以下是jQuery处理文件上传的代码:

$('#uploadButton').click(function(){
    var fileInput = $('#fileInput')[0];
    var file = fileInput.files[0];
    var formData = new FormData();
    formData.append('file', file);

    $.ajax({
        url: 'your-upload-url',   // 上传地址
        type: 'POST', 
        data: formData,
        processData: false,  // 不处理数据
        contentType: false   // 不设置内容类型
    }).done(function(res) {
       console.log(res);
    }).fail(function(res) {
        console.log("文件上传失败");
    });
});

这段代码基于 HTML5 的文件 API 实现文件上传,所有现代浏览器包括 Chrome 都支持 HTML5,所以不会存在兼容性问题。同时,对于不支持 JavaScript 和 Ajax 的古老或特殊浏览器,你应该提供退化处理,例如服务器端接收 POST 提交的上传。

我们可以先判断下是否支持flash

function hasFlash() {
    var plugin = navigator.plugins['Shockwave Flash'];
    if(plugin) {
        return true;
    }

    // 对于IE,需要使用ActiveXObject而不是Plugin
    try {
        var flash = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        if(flash) {
            return true;
        }
    } catch (e) {}

    return false;
}

如有类似技术需求可联系QQ:706448591

相关文章

Linux使用supervisor创建守护进程方法

Linux使用supervisor创建守护进程方法

下载最新的supervisor安装包: supervisor-4.2.5.tar.gz 安装步骤 wget https://www.wangjikeji.com/uploads/upload...

windows下composer简单使用

windows下composer简单使用

在windows下执行composer,可直接下载composer.phar文件,控制台运行即可此处下载composer.zip然后将该文件composer.phar放置到需要执行composer安装...

【精选】PHP将股票日K线数据转换为周K线数据

【精选】PHP将股票日K线数据转换为周K线数据

可以使用PHP来将股票日K线数据转换为周K线数据。具体实现方法如下:获取日K线数据,例如从数据库中查询出所有日期的股票数据,保存在一个数组中,每个元素包含如下信息: $day_data = [...

迁移wordpress站点到阿里云函数计算

迁移wordpress站点到阿里云函数计算

wordpress作为一款常用的建站工具,存在大量的老站需要维护升级,本文讲一下如何迁移到阿里云函数计算,使用Serverless架构进行部署wordpress 在函数计算上全新安装wordpres...

使用xunsearch进行php全文检索

使用xunsearch进行php全文检索

迅搜(xunsearch)是采用 C/C++ 基于 xapian 和 scws 开发的全文搜索引擎解决方案,适用于php全文检索、mysql全文检索和各种站内搜索。支持海量数据高速检索,功能强大、...

用伪静态防止恶意下载网站目录下的压缩包

用伪静态防止恶意下载网站目录下的压缩包

起因很多黑客用恶意工具扫描网站目录下的压缩包文件,进行批量下载,导致带宽占满,有时候该压缩包还有可能是网站备份文件,损失不可估量,所以用伪静态的方法,拦截压缩包的后缀,可以起到比较好的效果 抛砖引玉...