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.最後上傳完成以後是這樣的（其實還有裁剪的功能，下一篇介紹）