分享2个jQuery插件–jquery.fileupload与artdialog

2020-05-16 18:46:29易采站长站整理

这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法!
简单用代码举例子
最小化的方法


data-url是上传后执行上传文件的php方法
<input id=”fileupload” type=”file” name=”files[]” data-url=”server/php/” multiple>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<script src=”js/vendor/jquery.ui.widget.js”></script>
<script src=”js/jquery.iframe-transport.js”></script>
<script src=”js/jquery.fileupload.js”></script>
<script>
$(function () {
    $(‘#fileupload’).fileupload({
        dataType: ‘json’,  //josn传输
        done: function (e, data) { //上传结束后执行
            $.each(data.result.files, function (index, file) {
                $(‘<p/>’).text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>

稍微扩展一下


<input id=”fileupload” type=”file” name=”files[]” multiple>
 <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
 <script src=”js/vendor/jquery.ui.widget.js”></script>
 <script src=”js/jquery.iframe-transport.js”></script>
 <script src=”js/jquery.fileupload.js”></script>
 <script>
 $(function(){
  //完整的API在这里https://github.com/blueimp/jQuery-File-Upload/wiki/API 我就是简单的介绍一些常用的说明
  $(“#fileupload”).fileupload(‘option’,{        //设置上传事件
   url: ‘http://localhost/php/index.php’     //指定php上传方法
   disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),     //禁止生成缩略图