henryspace

记录精彩的程序人生 开始使用

fileupload.js 上传插件的简单实用

1 下载插件

github地址:https://github.com/blueimp/jQuery-File-Upload

中文文档:http://www.jq22.com/jquery-info230

2导包

<!-- jquery-fileupload依赖与jquery -->
<script src="assets/jquery/jquery.min.js"></script>
<!-- jquery ui小部件,上传插件依赖了jquery ui的小部件 -->
<script src="assets/jquery-fileupload/jquery.ui.widget.js"></script>
<!-- 如果上传图片需要跨域,那么需要引入这个js文件,如果不跨域,则不需要引入 -->
<script src="assets/jquery-fileupload/jquery.iframe-transport.js"></script>
<!-- jquery上传插件 -->
<script src="assets/jquery-fileupload/jquery.fileupload.js"></script>

3 案例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
    <!-- name指定图片上传时的name属性 -->
    <!-- data-url指定图片上传时的接口地址 -->
    <!-- multiple指定多文件上传 -->
 <!-- <input id="fileupload" type="file" name="files" data-url="server/php/" multiple> -->
  <input type="file" name="pic1" id="fileupload"  >
   <img id="uploadImage" src="images/none.png"  width="100" height="100" alt="">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/jquery-fileupload/jquery.ui.widget.js"></script>
<script src="assets/jquery-fileupload/jquery.fileupload.js"></script>
<script>
$(function () {
    //初始化上传插件
    $('#fileupload').fileupload({
    //上传地址
        url:'/category/addSecondCategoryPic',
    //返回格式
        dataType: 'json',
        //e:事件对象
      //data:图片上传后的对象,通过data.result.picAddr可以获取上传后的图片地址
        done: function (e, data) {
            $('#uploadImage').attr('src',data.result.picAddr);
        }
    });
});
</script>
</body>
</html>

原文链接:https://www.cnblogs.com/God-is-with-me/articles/10542514.html

评论
留下你的脚步
推荐阅读