Html5+flash to build compatible browser file upload scheme

Compared with Flash, the new technology using HTML5 can improve the loading speed of the program. However, in the current situation, HTML5 feature support is not high, the availability of plug-ins is really narrow. For example, the new features I use in Plug-ins are:

1. Multiple properties of the <input type= "file"/> Label
2. File and FileList APIs
3. XMLHttpRequest2 's upload and onprogress.
4. FormData

Take file, IE9 are not supported, so in the current environment IE series Browser can hardly use. Therefore, it is necessary to do a compatible solution. How does compatibility work? This is not nonsense, forget your H5 version of the uploadify is how to come? We can run the Flash version of uploadify on browsers that do not support these features.

To target, what we have to do is actually only three steps:

1. Write an adapter that detects the extent to which the client browser supports these features of HTML5
2. If supported, dynamically load the JS and CSS files required for the HTML5 version of the plug-in, and invoke the H5 version of the plugin
3. If not supported, dynamically load the Flash version of the plug-in required for JS and CSS files, invoke the Flash version of the plug-in

I named the adapter uploadadapter, so that our file structure should be like this:

One of the huploadify is the HTML5 version of my last article, Uploadify is the official flash version, left intact here. In order to dynamically call JS and CSS files, I also wrote a special jquery.loadscript.js, used to dynamically load files. That's all the stuff you need.

How to use

Because the dynamic load file was changed to, there are only three files on the page that need to be introduced:

<script type= "Text/javascript" src= "jquery.js" ></script> <script type= "Text/javascript"
Jquery.loadscript.js "></script>
<script type=" Text/javascript "src=" Jquery.uploadAdapter.js "> </script>

When we call, we use Uploadadapter directly, and the other work adapters are done automatically, like this:

$ (' #upload '). Uploadadapter ({

Auto:true,

ButtonText: ' Select File ',

Fileobjname: ' File ',

Filetypeexts: ' *.jpg;*.png;*.exe ',

Multi:true,

Formdata:{key:123456,key2: ' VVVV '},

filesizelimit:9999,

Showuploadedpercent:true,

Showuploadedsize:true,

removetimeout:9999999,

Uploader: ' upload.php '

});

To avoid the path error of a dynamic invocation in the project, a new configuration entry is added to the uploadadapter:

BaseURL: ' Url/uploadadapter '//Specify root directory for Uploadadapter

Also, if you want to manually specify the type of plug-in you want to invoke, a configuration is provided here:

Plugintype: ' HTML5 '//Manually specify plug-in type, string, HTML5 or Flash

screenshot

Below are the Flash version and HTML5 version of the screenshot:

Flash version

HTML5 Edition

There are some differences in style, and I'm too lazy to change it. CSS files are self-contained and can be modified on their own.

Source Code

Source I still play as a complete package, including the demo file. Need to be deployed in a PHP environment.

jab here Download: http://files.cnblogs.com/lvdabao/uploadAdapter.zip