怎么简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览

是只能用前台jquery实现？？？还要实现预览？？？还要兼容IE 7+代码如下利用html5实现:几乎兼容所有主流浏览器，当然IE必须是IE 6以上

jquery代码

$(function() {

$("#file_upload")change(function() {

var $file = $(this);

var fileObj = $file[0];

var windowURL = windowURL || windowwebkitURL;

var dataURL;

var $img = $("#preview");

if(fileObj && fileObjfiles && fileObjfiles[0]){

dataURL = windowURLcreateObjectURL(fileObjfiles[0]);

$imgattr('src',dataURL);

}else{

dataURL = $fileval();

var imgObj = documentgetElementById("preview");

// 两个坑:

// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；

// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；

imgObjstylefilter = "progid:DXImageTransformMicrosoftAlphaImageLoader(sizingMethod=scale)";

imgObjfiltersitem("DXImageTransformMicrosoftAlphaImageLoader")src = dataURL;

}

});

});

html代码：

<input id="file_upload" type="file" />

<div class="image_container">

<img id="preview" width="60" height="60">

</div>

注下面所说的只能用flash实现太过时，太不靠谱，上传到后台回传是正解，不过不满足你只能用前台写预览！

//纯手打，望采纳

var $th;//变量外提，减少重复申明变量带来的内存消耗

$('#them>div>img')each(function () {

    $th = $(this);

    $thparent()height($thheight())

});

不管是后台返回的数据还是静态写好的 还是用常规的去定义。除非是去 *** 作动态生成的元素使用了ajax动态往页面添加元素

1、用css控制

外面用div包裹起来，然后用css 对这个div下面的进行修改

<div class='img_div'><img src='abcjpg' alt='我是一张'/></div>

2、用js控制

和上面一样，先用div包裹起来

$('img_div img')css({略});

有关原因的分析:

原因一

<div class="img"><img src="" /></div>

$("#img> img")应该改为$("img> img")

原因二

在页面加载时会立即执行你的js,但此时如果div页面元素尚未完成加载，自然取不到img元素，也不会添加click事件,故无效

解决方法:

$(document)ready(function(){

$("img> img")click(function (){windowopen($(this)attr("src"));});

});

1通过顶层document节点获取：（1）documentgetElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看作是documentgetElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。（2）documentgetElementsByName(elementName)：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。（3）documentgetElementsByTagName(tagName)：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：documentgetElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应用其他的节点，下面将会提到。2、通过父节点获取：（1）parentObjfirstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObjfirstChildfirstChildfirstChild的形式，如此就可以获得更深层次的节点。（2）parentObjlastChild：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObjfirstChildlastChildlastChild（3）parentObjchildNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox20011上获取的是所有子节点即包括子节点的子节点。（4）parentObjchildren：获取已知节点的直接子节点数组。注意：经测试，在IE7上，和childNodes效果一样，而Firefox20011不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。（5）parentObjgetElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObjgetElementsByTagName('A')返回已知的子节点中的所有超链接。3、通过临近节点获取：（1）neighbourNodepreviousSibling：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。（2）neighbourNodenextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。4、通过子节点获取：（1）childNodeparentNode：获取已知节点的父节点。上面提到的方法，只是一些基本的方法，如果使用了Prototype等JavaScript库，可能还获得其他不同的方法，例如通过节点的class获取等等。不过，如果能够灵活运用上面的各种方法，相信应该可以应付大部分的程序。注意这是转载的文档：其中通过firstChild和lastChild获得HTMLNode是不可取的。因为，根据浏览器的不同，firstChild有可能返回parentObj的属性对象。

以上就是关于怎么简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览全部的内容，包括:怎么简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览、jquery 遍历id为them 下的所有子div 和 子div下面的img 并把img的高度赋给每个相应的子div、从后端获取到的数据直接返回div，里面的img怎么设置css样式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！