先上效果图：

那个文件按钮样式先忽略

点击选择图片（浏览),随便选一张图片

射流研究…代码如下

//上传图片立即预览函数PreviewImage(IMgfile){ var文件扩展名=IMgfile。价值。子字符串(IMgfile。价值.lastIndexOf(' . ')，IMgfile。价值。长度)；文件扩展名=文件扩展名。tolowercase()；if(((文件扩展名！='.jpg ')(文件扩展名！='.gif ')(文件扩展名！='.JPEG ')(文件扩展名！='.png ')(文件扩展名！='.BMP '){ alert('对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢!');imgfile。焦点()；} else { var pathif(文档。all)//IE { imgfile。select()；路径=文档。选择。创建范围().文本；文件。getelementbyid(' photo _ info ').innerHTML=文档。getelementbyid(' photo _ info ')。风格。filter=' progid : maximagettransform .微软。alpha imageloader(enabled=' true '，sizingMethod='scale '，src= ' path ' ')'；//使用滤镜效果} else//FF { path=window .网址。createobjecturl(IMgfile。文件[0])；//FF 7.0以上//路径=imgFile.files[0]。getastualta()；//FF 3.0文档。getelementbyid(' photo _ info ').innerHTML=' img id=' img 1 ' width=' 120 px ' height=' 100 px ' src=' path ' '/'；//文档。getelementbyid(' img 1 ').src=路径；} } }html代码，其实不重要啦

div class='表单-组有-成功有-反馈'标签为=' info _ photo ' class=' col-sm-2控件-标签'物品图片/label div=' col-sm-10 ' span=' BTN BTN-成功BTN-档案'选择图片' span class='磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇磷脂酰肌醇* /span详细描述/label div class=' col-sm-10 ' textarea class=' form-control ' rows=' 5 ' id=' info _ desc ' name=' info _ desc '占位符='如需补充，请填写.标题='可包含中文数字和常用字符/文本区域div id=' photo _ info ' class=' photo _ info '/div/div/div CSS代码就不上了啊顺便补充一下thinkphp上传图片代码，把整个发布消息都拷过了算了

公共函数loseThing(){ $ M=M(' info ')；$ m-create()；$上传=新建思考上传();//实例化上传类$ upload-MaxSize=3145728；//设置附件上传大小$upload-exts=array('jpg '，' gif '，' png '，' jpeg '，' BMP ')；//设置附件上传类型$upload-rootPath=' ./Public/'；$ upload-savePath='/Uploads/'；//设置附件上传目录$ upload-autoSub=false；//上传文件$ info=$ upload-上传();if($info) { //上传成功foreach($ info as $ file){ $ m-info _ photo=$ file[' save name ']；} } $ m-create _ time=date(' Y-m-d h : I :s '，time())；$ m-uid=$ _ SESSION[' id ']；$ m-username=$ _ SESSION[' username ']；/* $ m-user _ img=$ _ SESSION[' filename ']；*/$m-info_type='寻物启事；//信息类型为失物$ LastID=$ m-add()；if($lastId){ $this-success('发布成功');}else{ $this-error('发布失败，请先登录');} }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。