ajaxfileupload上传文件

最新推荐文章于 2022-08-09 23:15:05 发布

Amumu丶

最新推荐文章于 2022-08-09 23:15:05 发布

阅读量461

点赞数

文章标签：自己保存用

本文链接：https://blog.csdn.net/ssadasdas/article/details/78372989

版权

文件上传输入框

         <label for="textarea">个人照片:</label>
       <div class="row">
              <div class="col-md-6 col-sm-6 col-xs-6 ">
                     <div class="file-photo">
                       <div class="pre-img">
                              <img src="#" class="img-responsive" id="img1" />
                          </div>
                          <label for="inputFile1" class="label-file">上传半年内的照片片
                                <input type="file" id="inputFile1" value="" name="userphoto">
                                 <input type="hidden" name="dLogo" id="dLogo">
                            </label>
                       </div>
                       </div>
            </div>

</div>

需要引入ajaxfileupload.js

$(function() {
               $("#inputFile1").change(function(e) {
                   var file = e.target.files[0];
                   var reader = new FileReader();
                   reader.onload = function(e) {
                       $("#img1").attr({
                           'src': e.target.result
                       });
                   }
                   reader.readAsDataURL(file);
                   $.ajaxFileUpload({
                       url:'${pageContext.request.contextPath}/uploadServlet',
                       secureuri:false,
                       fileElementId:'inputFile1',
                       dataType:'json',
                       success:function(data, status) {
                           $("#dLogo").val(data.responseText);
                       },

                       error:function(data, status, e) { //服务器响应失败处理函数
                           $("#dLogo").val(data.responseText);
                       }
                   })
               })