如何使用File对象作为css图像源？

Question

我引用了一个javascript文件对象（图像），它是由用户从“打开文件对话框”中提供的。如何将此图像文件加载到css背景图像中，而不必先将所有数据读入base64-string？

我发现的示例使用FileReader读取数据，然后将其加载到css-tag中，但这似乎是对内存的一些无效使用。因为我有文件引用，所以如果我能以某种方式将其传递到css-tag中并将图像流式传输到内存中则会很好。 url（） - “background-image”的包装器支持本地文件名，但出于安全原因，我的脚本无法使用文件的完整路径，因此我无法使用它。

有什么建议吗？

Answer 1

假设您将File对象放在名为<base href="http://www.normalnonoobs.com" target="_blank"> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/ack2.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/anger.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/angryfire.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/angrytalk.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/banghead.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/banplz.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/bonk.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/bow.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/clap.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/crash.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/crazya.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/crybaby2.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/cussing.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/director.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/dontknow.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/doubt.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/drunken_smilie.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/duhos2.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/dumcsi.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/eplus2.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/faceplant.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/fejvakaras.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/fiesta.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/fplasma.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/fsniper.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/fxloc.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/happy.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_arrow.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_biggrin.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_confused.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_cool.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_evil.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_exclaim.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_eyes.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_idea.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_lol.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_mad.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_mrgreen.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_neutral.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_question.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_razz.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_sad.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_smile.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_surprised.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_thumleft.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_thumright.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_twisted.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_wink.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/indifferent.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/kacsint.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/kerdes.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing-smiley-007.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing1.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing6.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing7.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/levele.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/notworthy.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/occasion14.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-012.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-014.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-036.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/PDT_Armataz_01_37.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/phone.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/popcorn.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/rinya.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/s-shock.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/s-telefrag.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/sad3.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/schmoll2.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/shakehead.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/sign13.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/sign16.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/sir.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/sleepy1.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile11.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile13.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile26.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile36.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile41.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/smile9.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-chores028.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-gen042.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-scared002.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/smoke.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/tongue3.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/toothy9.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/umm.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/vigyor2.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/vigyor5.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/violent.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/violent1.gif"></div> </div> <div class="shoutbox_smileTableContainer"> <div class="shoutbox_smileTable"><img src="/assets/smiles/walking.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/whatever.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/wilting.gif"></div> <div class="shoutbox_smileTable"><img src="/assets/smiles/wtf.gif"></div> </div>的变量中。

file

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL