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

近期客户找到我们升级他们的老古董系统，这个系统创建于十几年前，使用了大量过时老旧的组件，需要更新替换，其中就包括了让很多程序员头疼的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