移動端上傳圖片（ajax跨域請求）

Donald 發布于2019-08-20 10:24 / 2956人閱讀

摘要：項目開發簡述項目需求上傳圖片并展示。做是為了給后臺傳值。上傳截圖點擊更換提交數據判斷需要填寫的參數是否為空，如果不為空直接往下走，直到成功提交數據。優點確實提高上傳速度。缺點后臺查看提交的圖片，模糊不清晰。

第一次寫項目開發經驗，望擔待。
除了前端以外的事就不叨叨了，下面開始弄干活（兩個頁面首頁、列表頁）。

項目 開發簡述

項目需求：上傳圖片并展示。
項目地址：項目的鏈接地址
開發工具：sublime
后臺：java
開發語言：JavaScript（jq）
項目運用到的技術：css3+html5+jquery+ajax jsonp

html部分

重點說一下這兩個地方：

做了一個li，里面放一個span用來做數字標題，再用border-radius做圓角，寫一個寬度，要定死寬和高，在用字體居中和浮動向左，就OK了；

重點說一下上傳圖片這個地址，因為需求，領導不喜歡原生的上傳圖片按鈕，需要放自己做的上傳按鈕，我在最外頭套了一個label里面放了input和圖片。做input是為了給后臺傳值。


    上傳截圖
    
        
            
        
        
            "
        +""+"");
    });
    $(".zheng").css("opacity","0");
    $(".zheng").attr("title","點擊更換");
    $(".zhengImg").css("display","none");
    $(".loading,#mask").show();
    ajax1();
});

4、提交數據
判斷需要填寫的參數是否為空，如果不為空直接往下走，直到成功提交數據。

心得

在做這個項目的時候，最頭疼的地方，應該就是傳輸圖片了，因為如果過大的圖片變成64編碼，會數據量巨大，傳輸過慢，我的處理方式是在上傳的時候先把圖片進行壓縮，壓縮的不是尺寸，是分辨率。
優點：確實提高上傳速度。
缺點：后臺查看提交的圖片，模糊不清晰。

更好的方法我也沒有想到，希望大家可以一起探討。

GPU云服務器云服務器 H5移動端上傳圖片 ajax請求跨域問題 js ajax跨域請求數據 jquery_ajax跨域請求

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80129.html

移動端上傳圖片（ajax跨域請求）

摘要：項目開發簡述項目需求上傳圖片并展示。做是為了給后臺傳值。上傳截圖點擊更換提交數據判斷需要填寫的參數是否為空，如果不為空直接往下走，直到成功提交數據。優點確實提高上傳速度。缺點后臺查看提交的圖片，模糊不清晰。第一次寫項目開發經驗，望擔待。除了前端以外的事就不叨叨了，下面開始弄干活（兩個頁面首頁、列表頁）。項目開發簡述項目需求：上傳圖片并展示。項目地址：項目的鏈接地址開發工具：su...

frontoldman 2019-08-29 11:10 評論0 收藏0
WEB之常見工作問題總結（1-20）

摘要：第三種，使用格式，即在中請求參數處理跨域問題當然請求方式只能是。最后發現有網友說版本不穩定引起的，于是把百度地圖回退到了，結果還真是可以了。請問在移動端頁面中播放優酷里面的視頻，怎樣實現 1.web掃碼登錄怎么實現，思路步驟 WEB平臺手機第1步生成二維碼第2步（ajax監控后臺）掃碼第3步 ...

genedna 2019-08-22 13:40 評論0 收藏0
基于Node的React圖片上傳組件實現

摘要：常用的設置如下下的請求風格下的請求和不太一樣，在正式的請求發出之前都會先發一個類型為的請求作為試探，只有當該請求通過以后，正式的請求才能發向服務端。所以服務端路由我們還需要處理這樣一個請求注意該請求同樣需要設置跨域。寫在前面紅旗不倒，誓把JavaScript進行到底！今天介紹我的開源項目 Royal 里的圖片上傳組件的前后端實現原理（React + Node），花了一些時間，希望對...

cfanr 2019-08-20 10:14 評論0 收藏0