jquery得file upload插件的基本使用

最新推荐文章于 2024-07-31 16:33:32 发布

pk199393

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量823

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/pk199393/article/details/105276757

版权

基于Jquery的file upload插件是非常强大的一款文件上传插件，它提供了非常多的特性，大大方便了我们对于文件上传的操作。

一般来说，为了使用这款插件，我们只需要引入Jquery、jquery.ui.widget、jquery.fileupload这三个JS文件即可，另外，如果希望能够上传包含html的内容，还需要导入jquery.iframe-transport这个插件。

下面就file upload插件的基本使用做一个说明：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="D:\frontendStudy\assets\css\bootstrap.min.css">
  <link rel="stylesheet" href="D:\frontendStudy\assets\css\jquery.fileupload.css" />
  <link rel="stylesheet" href="D:\frontendStudy\assets\css\jquery.fileupload-ui.css" />
  <style>
    .file {
      position: relative;
      background: linear-gradient(to right, lightblue 50%, transparent 50%);
      background-size: 200% 100%;
      background-position: right bottom;
      transition: all 1s ease;
    }

    .file.done {
      background: lightgreen;
    }

    .file a {
      display: block;
      position: relative;
      padding: 5px;
      color: black;
    }
  </style>
</head>

<body>
  <div class="container">
    <input id="fileupload" type="file" name="files[]" multiple>
  </div>
  <script src="D:\frontendStudy\assets\js\jquery-1.12.4-uncompressed.js"></script>
  <script src="D:\frontendStudy\assets\js\bootstrap.min.js"></script>
  <script src="D:\frontendStudy\assets\js\jquery.ui.widget.js"></script>
  <!-- <script src="D:\frontendStudy\assets\js\jquery.iframe-transport.js"></script> -->
  <script src="D:\frontendStudy\assets\js\jquery.fileupload.js"></script>
  <script>
    $(function () {
      $("#fileupload").fileupload({
        dataType: "json",
        url: 'http://jquery-file-upload.appspot.com/',
        add: function (e, data) {
          data.context = $('<p class="file">')
            .append($('<a target="_blank">').text(data.files[0].name))
            .appendTo(document.body);
          data.submit();
        },
        progress: function (e, data) {
          var progress = parseInt((data.loaded / data.total) * 100, 10);
          data.context.css("background-position-x", 100 - progress + "%");
        },
        done: function (e, data) {
          data.context
            .addClass("done")
            .find("a")
            .prop("href", data.result.files[0].url);
        }
      });

    });
  </script>
</body>

</html>

注意到在最下方的script中包含了fileupload的初始化代码。

pk199393

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery得file upload插件的基本使用

基于Jquery的file upload插件是非常强大的一款文件上传插件，它提供了非常多的特性，大大方便了我们对于文件上传的操作。一般来说，为了使用这款插件，我们只需要引入Jquery、jquery.ui.widget、jquery.fileupload这三个JS文件即可，另外，如果希望能够上传包含html的内容，还需要导入jquery.iframe-transport这个插件。下面就fi...
复制链接

扫一扫