jquery插件fileupload图片上传（前端如何处理）

1.页面首先引入jquery，版本不要低于1.6
　　　<script src="../js/jquery.min.js"></script>
2.其次页面引入对应的这个五个js,按顺序放置
     <script src="../js/jquery.ui.widget.js"></script>
 <script src="../js/jquery.iframe-transport.js"></script>
　　　<script src="../js/jquery.fileupload.js"></script>
　　　<script src="../js/jquery.fileupload-process.js"></script>
　　　<script src="../js/jquery.fileupload-ui.js"></script>
3.html结构如下：
　　<div class="control-group"><label>上传头像：</label>
 <div class="controls upload-bg"><!---->
<input class="upload" id="file" type="file" name="file">
 <img src="" style="display:none;width:100%;height:100%" id="target" alt="[Jcrop Example]"/>
 <input type="hidden" value="" id="url">
 </div>
 <p class="reupload">重新上传
<input class="imgEditor" id="uploadNext" type="file" name="file" value=""/>
　　</p>
 </div>
这个样式是这样的：
4.css样式如下：如有些结构和样式不一致的，希望自己调整一下
　　/*上传图片*/
.control-group .upload {
 width: 100%;
 height: 100%;
 opacity: 0;
 cursor: pointer;
}

.control-group .upload-bg {
 width: 240px;
 height: 240px;
 position: relative;
 border: 1px solid #ccc;
 background: url("../images/upload.png") center no-repeat;
 margin-left: 200px;
 margin-top: -25px;
}

.control-group .upload-bg:hover {
    border: 1px dashed #0000FF;
    transition: border 1s;
}
.control-group .upload-bg p, .imgEditor {
    position: absolute;
    bottom: 0;
    display: none;
    text-align: center;
    width: 100%;
    margin: 0;
    background: #210606;
    opacity: 0.6;
    color: #ccc;
    cursor: pointer;

}

.control-group .upload-bg:hover {
    border: 1px dashed #0000FF;
    transition: border 1s;
}
.fm .reupload{margin-bottom:0 !important;}
.control-group .upload-bg p, .imgEditor {
    position: absolute;
    bottom: 0;
    display: none;
    text-align: center;
    width: 100%;
    margin: 0;
    background: #210606;
    opacity: 0.6;
    color: #ccc;
    cursor: pointer;

}

.imgEditor {
    opacity: 0;
    z-index: 2;
    left: 0;
    height: 100% !important;
    display: block;

}

.reupload{
    margin-top:2px;
    position: relative;
    height: 24px !important;
    width: 243px !important;
    margin-left: 200px;
    line-height: 24px;
    background: #9999CC;
    display: none;
}

5.上传的js部分：

function imgUpLoad(eleId) {
        $('#' + eleId).fileupload({
 autoUpload: true,//自动上传
 url: "http://xxxxx.url",//ַ上传图片对应的地址
 dataType: 'json',
 done: function (e, data) {
 var oimage = data, _this = $('#' + eleId);
 if (eleId == 'file') {
 _this.hide();
 _this.siblings('img').attr('src', oimage.result.url).show();
 $('.reupload').show();//第一次上传完成，显示重新上传

 } else {//重新上传
 _this.closest('.control-group').find('#target').attr('src', oimage.result.url); 
}
 }
 }）
}
6.最后上传完成之后是这样的（其实还有裁剪的功能，下一篇介绍）

 

转载于:https://www.cnblogs.com/-youth/p/6387580.html