问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&title&&/title&
&script src="js/mui.min.js"&&/script&
&script src="js/jquery1.42.min.js"&&/script&
&script type="text/javascript" src="js/mui.min.js"&&/script&
&link href="css/mui.min.css" rel="stylesheet" /&
&script type="text/javascript" charset="utf-8"&
mui.init();
font-family: "Helvetica Neue", Helvetica, sans-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background: #E6E6E6;
&script type="text/javascript"&
var files = [];
var i = 1,
gentry = null,
var hl = null,
le = null,
// 监听DOMContentLoaded事件
document.addEventListener("DOMContentLoaded", function() {
// 获取DOM元素对象
hl = document.getElementById("history");
le = document.getElementById("empty");
}, false);
// 上传文件
function upload() {
if(files.length &= 0) {
plus.nativeUI.alert("没有添加上传文件！");
if(files.length & 2) {
f1 = files[0].
f1 = files[0].
f2 = files[1].
var wt = plus.nativeUI.showWaiting();
var url = 'http://demo./helloh5/uploader/upload.php';
//预期服务器范围的数据类型
var dataType = 'json';
//发送数据
var data = {
files1: f1,
files2: f2
$.post(url, data, success, dataType);
//成功响应的回调函数
var success = function(response) {
plus.nativeUI.closeWaiting();
if(response != null) {
alert("上传成功");
function getImage() {
var cmr = plus.camera.getCamera();
cmr.captureImage(function(p) {
plus.io.resolveLocalFileSystemURL(p, function(entry) {
if(files.length & 2) {
createItem(entry);
appendFile(p);
}, function(error) {
alert("Capture image failed: " + error.message);
filename: "file:///storage/sdcard0/DCIM/Camera/" + "ra/"
} //改变一下拍照的路径,名字
// 从相册添加文件
function appendByGallery() {
plus.gallery.pick(function(path) {
plus.io.resolveLocalFileSystemURL(path, function(entry) {
if(files.length & 2) {
createItem(entry);
appendFile(path);
// 添加文件
var index = 1;
function appendFile(path) {
var img = new Image();
img.onload = function() {
var that =
//生成比例
var w = that.width,
h = that.height,
scale = w /
w = 50 || //480
你想压缩到多大
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({
ctx.drawImage(that, 0, 0, w, h);
var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8); //1z 表示图片质量，越低越模糊。
alert(base64);
files.push({
name: "file" + index,
pic: base64
}); // 把base64数据丢进数组，上传要用。
var pic = document.getElementById("x");
pic.src = base64; //这里丢到img 的 src 里面就能看到效果了
// 显示文件
function displayFile(li) {
var name = li.entry.
var suffix = name.substr(name.lastIndexOf('.'));
var url = "";
url = "examples/camera_image.html";
w = plus.webview.create(url, url, {
scrollIndicator: 'none',
scalable: true,
bounce: "all"
w.addEventListener("loaded", function() {
w.evalJS("loadMedia('" + li.entry.toLocalURL() + "')");
//w.evalJS( "loadMedia(\""+"http://localhost:13131/_doc/camera/"+name+"\")" );
}, false);
w.addEventListener("close", function() {
}, false);
w.show("slide-in-right", 300);
// 添加播放项
function createItem(entry) {
var li = document.createElement("li");
li.className = "ditem";
li.innerHTML = '&span class="iplay"&&font class="aname"&&/font&&br/&&font class="ainf"&&/font&&/span&';
li.setAttribute("onclick", "displayFile(this);");
hl.insertBefore(li, le.nextSibling);
li.querySelector(".aname").innerText = entry.
li.entry =
// 设置空项不可见
le.style.display = "none";
// 清除历史记录
function cleanHistory() {
hl.innerHTML = '&li id="empty" class="ditem-empty"&暂无照片&/li&';
le = document.getElementById("empty");
files.splice(0, files.length);
&div id="dcontent" class="long-dcontent"&
&table class="long-table"&
&span style="margin: 0 0 10px 0color: #6c6c6c;"&照片&/span&
&td style="background: #text-align:color:#9B9B9B;width:40%"&
&div class="button button-select pz" onclick="getImage()"&&img src="../images/pz.png" style="margin: 10px 20 " /&拍摄照片&/div&
&td style="width:10%"&&/td&
&td style="background: #text-align:color:#9B9B9B;width:40%"&
&div class="button button-select pz" onclick="appendByGallery()"&&img src="../images/pz.png" style="margin: 10px 20 " /&选择照片&/div&
&p class="heading" style="color: #6c6c6c;"&照片预览：&/p&
&div id="history" class="dlist" style="text-align:"&
&li id="empty" class="ditem-empty" style="list-style-type: "&暂无照片&/li&
&div class="b-waring" onclick="cleanHistory();" style="border: 1px solid #999999;margin: 10padding:10px 0 ;text-align:"&清空照片&/div&
&div class="button long-btn" onclick="upload()" style="border: 1px solid #999999;margin: 10padding:10px 0 ;text-align:"&上传&/div&
&img src="" id="x" /&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这样可以在浏览器生成图片的地址提前预览 不需要等到服务器返回地址
function getObjectURL(file) {
if (window.createObjectURL != undefined) { // ie
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // 火狐
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // 谷歌
url = window.webkitURL.createObjectURL(file);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在php（服务端）返回上传成功后的路径给浏览器（客服端）
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
做图片预览的话，服务器端上传成功之后返回前端一个图片的地址，前端再将图片显示出来
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
图片上传成功后，需要后端返回成功信息。具体要和后端商量。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
看API接口文档，返回什么参数。需要用到什么，就和后端沟通。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
将图片路径存到数据库里面，再读取出来
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
一般都是后端把路径返回前端，你们后端要闹哪样
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
一般都是后端生成生给你一个URL的，你问下response回来是什么打出来看看，或者直接问后端的开发人员
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
通过上传接口上传图片，通常接口会返回相关数据，比如:
{data:{status:1,imgPath:"/xxx/xx.png"}}
status 上传的状态（上传成功，上传不成功），imgPath上传成功通常会给出访问图片的地址。
通过返回的图片地址就可访问图片了
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：从后台上传图片,为什么图片显示不全_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
从后台上传图片,为什么图片显示不全
网络数据传输分为上传和下载两种，上传图片属于将本地文件传输到互联网服务器中，上传图片后无法显示这一情况会受到网速和服务器的制约原因1：图片未完整上传，导致图片无法显示原因2：图片上传成功，正在审核中，如果审核通过，图片便会显示
采纳率：56%
来自团队：
有时候是图片的问题，你看看你的图片看缩略图的时候，详细信息那个地方能不能显示
详细信息在哪里
本回答被网友采纳
如果是网站后台请检查：1
分辨率大小
当前画册大小有无限制
你的空间大小
上传的格式
图片显示不全，应该是尺寸的问题，更改一下大小应该就ok了
鼠标放到图片上点击右键选择编辑
然后选择图像选项 然后选择拉伸/扭曲 有调整宽度和高度 然后将宽度和高度缩小 然后点击确定和保存就好了 。 调整完宽度和高度上传以后看效果可以从新调整
我就是这么搞的不知道能不能帮到你
估计是图片地址不正确
不明白。我图片另存为打开来是可以看全的。上传到内容里可以看全，上传作为新闻图片就不知为什么显示不全了。
一般你们在后台提交图片什么的话，要在后台更新一下缓存，然后在前台页面刷新一下，如果实在不行就问问你们的开发人员
首先看一下你的图片格式，还有就是看一下你的图片大小，是否在你网页承载范围，我之前也是这样，所以我一般都是见图片裁剪之后再上传到网站后台
图片JPG，然后我无论我调得再小，还是不行。有的图片又可以。是什么原因？是不是图片本身哪里的问题。
其他4条回答
为您推荐：
其他类似问题
您可能关注的内容
上传图片的相关知识
换一换
回答问题，赢新手礼包Posts - 213,
Articles - 2,
Comments - 929
..........
15:17 by 龙恩0707, ... 阅读,
一：FileList对象与file对象
& & &FileList对象表示用户选择的文件列表，在HTML4中，file控件内只允许放置一个文件，但是到了HTML5中，通过添加multiple属性，file控件内允许一次放置多个文件，控件内的每一个用户选择的文件都是一个file对象，而FileList对象是file对象的列表；
比如如下代码：
选择文件&input type="file" id="file" multiple size="80"/&
&input type="button" onclick="ShowFileName();" value="文件上传"/&
我们可以按住ctrl键选择多个文件；
JS代码如下：
function ShowFileName() {
var files = document.getElementById("file").
for(var i = 0; i & files. i+=1) {
var file = files[i];
console.log(file);
console.log(file.name);
我们先打印下file对象有哪些属性，在safari截图如下：
如上图可以看到有文件名(name)属性，文件大小(size)属性，最后修改时间，还有type属性等；
二：Blob对象
在HTML5中，新增一个Blob对象，代表原始二进制数据，我们上面提到的file对象也继承了这个Blob对象；
Blob对象有2个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串。
如下代码：
选择文件&input type="file" id="file" multiple size="80" accept="image/*"/&
&input type="button" onclick="ShowFileType();" value="显示文件信息"/&
文件字节长度:&span id="size"&&/span&&br/&
文件类型:&span id="type"&&/span&
JS代码如下：
function ShowFileType() {
var file = document.getElementById("file").files[0];
var size = document.getElementById("size");
var type = document.getElementById("type");
// 显示文件字节长度
size.innerHTML = file.
// 显示文件类型
type.innerHTML = file.
console.log(file);
我们打印出file，如下图所示：
三：FileReader对象
& & FileReader对象有5种方法，其中四种用于读取文件，另一种用来读取过程中断，需要注意的是：无论读取成功与失败，方法并不会返回读取结果，而是将结果保存在result属性中。此对象也是异步的。
FileReader对象的方法如下：
& & readAsBinaryString(file): 这个方法将blob对象或文件中的数据读取为二进制字符串，通常我们将它传送到服务器端，服务器端可以通过这段字符串存储文件。
& & readAsText(file,encoding): 以纯文本形式读取文件，将读取到的文本保存在result属性中，第二个参数用于指定编码类型，可选的。
& & readAsDataURL(file): 读取文件并将文件以数据URL的形式保存在result属性中。
& & readAsArrayBuffer(file): 读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。
FileReader对象的事件如下：
& & onabort:& 数据读取中断时触发
& & onerror: 数据读取出错时触发
& & onloadstart: 数据读取开始时触发
& & onprogress: 数据读取中
& & onload： 数据读取成功完成时触发
& & onloadend: 数据读取完成时触发，无论成功或失败。
我们可以先看看demo，如何使用FileReader对象中前面三个方法；注意：fileReader对象读取的数据都保存在result中，如下代码：
&label&请选择一个文件：&/label&
&input type="file" id="file" /&
&input type="button" value="读取图像" onclick = "readAsDataURL()"/&
&input type="button" value="读取二进制数据" onclick = "readAsBinaryString()"/&
&input type="button" value="读取文本文件" onclick = "readAsText()"/&
&div id="result"&&/div&
JS代码如下：
var result = document.getElementById("result");
if(typeof FileReader == 'undefined') {
result.innerHTML = "抱歉，你的浏览器不支持FileReader";
// 将文件以Data URL形式进行读入页面
function readAsDataURL(){
// 检查是否为图像类型
var simpleFile = document.getElementById("file").files[0];
if(!/image\/\w+/.test(simpleFile.type)) {
alert("请确保文件类型为图像类型");
return false;
var reader = new FileReader();
// 将文件以Data URL形式进行读入页面
reader.readAsDataURL(simpleFile);
reader.onload = function(e){
console.log(this.result);
result.innerHTML = '&img src="'+this.result+'" alt=""/&';
// 将文件以二进制形式读入页面
function readAsBinaryString(){
// 检查是否为图像类型
var simpleFile = document.getElementById("file").files[0];
if(!/image\/\w+/.test(simpleFile.type)) {
alert("请确保文件类型为图像类型");
return false;
var reader = new FileReader();
// 将文件以二进制形式进行读入页面
reader.readAsBinaryString(simpleFile);
reader.onload = function(e){
// 在页面上显示二进制数据
result.innerHTML = this.
// 将文件以文本形式读入页面中
function readAsText(){
var simpleFile = document.getElementById("file").files[0];
var reader = new FileReader();
// 将文件以文本形式读入页面中
reader.readAsText(simpleFile);
reader.onload = function(e){
result.innerHTML = this.
如上代码，如果需要演示的话，可以复制代码到文本编辑器去，预览下即可，这里就不截图了；但是如上代码，在safari浏览器就不支持了~&& 截图如下：
四：btoa方法与atob方法
在HTML5中，btoa方法与atob方法来支持base64编码，b可以被理解为一串二进制数据，a可以被理解为一个ASCLL码字符串，btoa的使用方法如下：
& & var result = window.btoa(data);
该方法用于将一串字符串进行base64编码处理，该方法使用一个参数，参数值由一串二进制数据组成的Unicode字符串，该方法返回编码后的base64格式的字符串。
atob方法使用如下所示：
& & var result = window.atob(data);
该方法用于将一串经过base64编码后的base64格式的字符串进行解码处理，该方法使用一个参数，参数值为一串经过base64编码后的字符串，方法返回经过解码后的一串由二进制数据组成的Unicode字符串；
浏览器支持：firefox，chrome，opera10.5+及IE10+
什么时候使用btoa方法呢？
当服务器端数据库中直接保存了是图片的二进制数据及图片文件的格式时，当我们需要根据此二进制数据来渲染图片的时候非常有用；如下代码：
&label&请选择一个文件：&/label&
&input type="file" id="file"/&
&input type="button" value="读取图像" onclick = "readPicture()" id="btnReadPicture"/&
&div id="result"&&/div&
JS代码如下：
if(typeof FileReader == 'undefined') {
result.innerHTML = "抱歉，你的浏览器不支持FileReader";
function readPicture(){
// 检查是否为图像类型
var simpleFile = document.getElementById("file").files[0];
if(!/image\/\w+/.test(simpleFile.type)) {
alert("请确保文件类型为图像类型");
return false;
var reader = new FileReader();
// 将文件以二进制文件读入页面中
reader.readAsBinaryString(simpleFile);
reader.onload = function(f){
var result = document.getElementById("result");
var src = "data:" + simpleFile.type + ";base64," + window.btoa(this.result);
result.innerHTML = '&img src ="'+src+'"/&';
当我们选择一张图像的时候，点击读取图像按钮即可生成一张图片，虽然此方法我们还可以使用我们上面介绍的readAsDataURL的方法也可以直接读取图像，但是当服务器中直接是保存的是二进制文件的话，我们可以直接使用btoa此方法生成图片即可；
下面我们可以看看atob的demo如下：
我们可以使用canvas来绘制一张图片后，点击上传图片按钮后，首先通过canvas元素的toDataURL（）方法获取该图片的url地址，最后获取该URL地址中的base64格式的字符串，最后使用atob方法将其解码为一串二进制数据，并将该二进制数据提交到服务器端；如下代码：
&input type="button" value="上传图片" onclick="imgSave()"/&&br/&
&canvas id="canvas" width="400" height="300"&&/canvas&
JS代码如下：
function draw(id) {
canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(0,0,255)';
context.fillRect(0,0,canvas.width,canvas.height);
context.fillStyle = 'rgb(255,255,0)';
context.fillRect(10,20,50,50);
draw('canvas');
function imgSave(){
var data = canvas.toDataURL("image/png");
data = data.replace("data:image/base64,","");
var xhr = new XMLHttpRequest();
xhr.open("POST","uploadImg.php");
xhr.send(window.atob(data));
uploadImg.php自己写；
下面我们来做一个本地图片上传前预览效果，但是safari不支持，所以在做移动端的同学可能不好了，特别是在IOS6下就不支持哦，应该还有其他办法可以解决的，我们可以看看百度的插件，网址如下：
之前我是做了一个上传本地图片之前预览效果，如下链接：
今天为了学习FileReader，我们可以再来学习下；之前的本地上传图片预览的话，不支持IE10+, 且把页面放在服务器端在IE下会有bug，如下所示：
如上所示，在IE下 这个方法 &document.selection.createRange() 不支持，因此为了修复这个bug和在IE10+以上的话，今天又特意研究了下,&在file控件下获取焦点情况下 document.selection.createRange() 将会拒绝访问，所以我们要失去下焦点。我们可以再加一句代码就可以支持了&file.blur();
IE10+的bug的话，我们可以使用html5的上面介绍的文件API来解决，先判断是不是IE，如果是的话，且小于10的话，使用滤镜的方法解决图片上传的问题，如果是其他浏览器的话，就使用html5的文件上传方法；但是safari没有处理好，原因是safari不支持html5的fileReader的API，所以如果在移动端开发的图片，如果需要兼容IOS6和6+的话，请注意一下，并不支持~ 当然如果大家有更好的方案来支持IOS6的话，请留言，可以一起总结，一起学习~
五：上传图片之前预览效果demo(Safari不兼容)
&1. 在标准浏览器下（IE10+）使用HTML5中文件API即可解决上传图片前预览效果；在这里有2中方案可以解决，第一种是使用文件API，如下代码：
function html5Reader(file) {
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("img");
pic.src=this.
2. 第二种方案是使用&URL.createObjectURL(fileObj) 这个方法和canvas技术, &我们先来看看 支持这个&URL.createObjectURL(fileObj) 的浏览器有哪些，我们可以点击下面的连接查看：
&实现代码如下：
function html5Reader(file) {
var fileObj = file.files[0],
img = document.getElementById("img");
// URL.createObjectURL
safari不支持
img.src = URL.createObjectURL(fileObj);
img.onload =function() {
var data = getBase64Image(img);
console.log(data);
// 打印出base64编码
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.
canvas.height = img.
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL; }
HTML代码如下：
&input type="file" id="logo" name="logo" accept="image/*"&
&img src= '' id="img"/&
&div id="btn" style="margin-top:50font-size:40"&btn&/div&
&canvas id="myCanvas"&&/canvas&
所有的JS代码如下：
var EventUtil = {
addHandler: function(element,type,handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent) {
element.attachEvent("on"+type,handler);
element["on" +type] =
var btn = document.getElementById("btn");
var pic = document.getElementById("img");
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.
canvas.height = img.
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
var ua = navigator.userAgent.toLowerCase();
EventUtil.addHandler(btn,'click',function(){
var file = document.getElementById("logo");
var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
// gif在IE浏览器暂时无法显示
if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
alert("图片的格式必须为png或者jpg或者jpeg格式！");
if(/msie ([^;]+)/.test(ua)) {
var lowIE10 = RegExp["$1"]*1;
if(lowIE10 == 6){
// IE6浏览器设置img的src为本地路径可以直接显示图片
file.select();
// 在file控件下获取焦点情况下 document.selection.createRange() 将会拒绝访问，所以我们要失去下焦点。
file.blur();
var reallocalpath = document.selection.createRange().
}else if(lowIE10 & 6 &&&lowIE10 & 10){
// IE7~9 IE10+按照html5的标准去处理
file.select();
// 在file控件下获取焦点情况下 document.selection.createRange() 将会拒绝访问，所以我们要失去下焦点。
file.blur();
var reallocalpath = document.selection.createRange().
// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
pic.src = 'data:image/base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}else if(lowIE10 &= 10) {
html5Reader(file);
html5Reader(file);
function html5Reader(file) {
var fileObj = file.files[0],
img = document.getElementById("img");
// URL.createObjectURL
safari不支持
img.src = URL.createObjectURL(fileObj);
img.onload =function() {
var data = getBase64Image(img);
console.log(data);
// 打印出base64编码
var file = file.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("img");
pic.src=this.网站文章图片显示不出来是什么问题_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
网站文章图片显示不出来是什么问题
在主站上显示不出来怎么办
我有更好的答案
如果图片可以正常上传到服务器上，那就去查看图片的路径，到代码里去查，路径错了所以显示不出来，把路径修改过来就好了。
是不是在后台改了就没问题了
后台不见得能改的了，你得先找出图片现在的路径和代码里的路径差在哪里才行。
为什么我在编辑里加了图片，点进网页也有图片，但在主站那里没有呢
那说明你网站上传图片功能正常，主站 应该就是你首页这里代码有问题，看这个页面的模板文件，看调用图片的这个代码是不是写错了。
采纳率：76%
还是要看生成的图片地址。是否正确。
下载个新的Flash player 或者修复下试试。
网络不好。解决方法；刷新下网站。
其他1条回答
为您推荐：
其他类似问题
文章的相关知识
换一换
回答问题，赢新手礼包