jQuery插件之jQuery-file-upload上传图片后回显图片的简单功能

下载地址

下载地址

使用步骤
插件下载完成后，我们可以可以在项目中进行引用，使用插件提供的功能。

这个功能实现起来非常简单

1、引入js文件

• jquey-1.8.3.min.js

• jquery-ui-widget.js

• jquery.iframe-transport.js

• jquery.fileupload.js

并且我们使用 bootstrap 美化页面，所以需要引入 bootstrap样式

<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

2、 HTML代码

<!--图片上传-->
<div class="box">
    <label for="fileupload" class="upload btn btn-success glyphicon glyphicon-upload">上传</label>
    <input id="fileupload" type="file" name="file" style="display: none;">
    <!--上传进度条-->
    <div class="progress_box">
<!--        上传进度使用 h5 中新增的 progress 元素，并创建一个id为upload_info 的控件，用于在上传完成后显示完成信息-->
        <progress value="0" max="100"></progress>
        <span id="upload_info"></span>
    </div>
    <!--图片上传成功后预览-->
    <img id="uploadimg" src="" width="400px" />
</div>

一般网站上传的input的type属性的原本样式不是很好看，可以采用label 的锚点链接的方式，去进行美化

说明：
美化上传控件
出于美化目的，将文件域隐藏，设置label 的 for 属性的值为文件域的id，然后再对label 进行美化，这样点击label也能打开文件选择对话框

<label for="fileupload" class="upload btn btn-s