黑马程序员技术交流社区

标题: 【郑州校区】前端与移动开发乐淘项目-day05 [打印本页]

作者: 谷粒姐姐    时间: 2018-11-12 15:54
标题: 【郑州校区】前端与移动开发乐淘项目-day05
[AppleScript] 纯文本查看 复制代码
1.jquery-fileupload插件使用的步骤:
A.引入需要的文件:
<script src="assets/jquery-fileupload/jquery.ui.widget.js"></script>
<script src="assets/jquery-fileupload/jquery.iframe-transport.js"></script>
<script src="assets/jquery-fileupload/jquery.fileupload.js"></script>

B.找到文件上传表单元素,设置id,name属性:
<input type="file" id="fileUpload" name="file">
注意:name="file"不是每次都是写file,应该参考接口文档设置该属性的值

C.找到文件上传表单元素,设置data-url属性用来设置图片上传的接口路径:
<input type="file" id="fileUpload" name="file" data-url="/category/addSecondCategoryPic">


D.编写js代码,实现文件上传:
$("#fileUpload").fileupload({
        dataType:"json",
        //文件上传之后的回调函数done
        done:function(e,data){
                //data参数中包含了上传图片的地址(即上传到服务器之后的图片地址)
                //预览上传的图片
                $("#preview").attr("src",data.result.picAddr);
        }
})






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2