//图片上传预览功能 var userAgent = navigator.userAgent;//用于判断浏览器类型 $(".file").change(function () { //获取选择图片的对象 var docObj =$(this)[0]; var picDiv=$(this).parents(".picDiv"); //得到所有的图片文件 var fileList = docObj.files; //循环遍历 for (var i = 0; i < fileList.length; i++) { //动态添加html元素 var picHtml="<div > <img /> <div><i>删除</i></div></div>" picDiv.prepend(picHtml); //获取图片imgi的对象 var imgObjPreview = document.getElementById("img"+fileList[i].name); if (fileList && fileList[i]) { //图片属性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '140px'; imgObjPreview.style.height = '125px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式 if(userAgent.indexOf('MSIE') == -1){//IE以外浏览器 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径 }else{//IE浏览器 if(docObj.value.indexOf(",")!=-1){ var srcArr=docObj.value.split(","); imgObjPreview.src = srcArr[i]; }else{ imgObjPreview.src = docObj.value; } } } } /*删除功能*/ $(".delbtn").click(function () { var _this=$(this); _this.parents(".imageDiv").remove(); }); });
此篇主要体现了两点：
1.input file 按钮改成自己想要的样式，就是将原本的input隐藏，用另一个标签<a>，<button>,<div>......代替，css控制他们加上自己需要的样式就可以了；
2.图片预览功能的实现，这里又分两种方法。
好了，到这里这篇就写完了，希望对你有所帮助。
您可能感兴趣的文章: