引进 webuploader.min.js与webuploader.css与upload.js 点击下载(upload.js) 此js包含传向后端接收图片的地址
后端接收前台上传的图片处理方法 上传并压缩图片
1、页面部分。
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3">选择图片:</label>
<div class="formControls col-xs-8 col-sm-9">
<div id="uploader">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div><div class="info"></div>
<div class="btns">
<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
<input type="text" class="input-text" value="" id="imgPath" name="imgPath" hidden="true">